Css background-image не отображается вообще

Я пытаюсь дать div-класс фонового изображения заголовка, но он не появится.Css background-image не отображается вообще

Пожалуйста, см:

[CSS]

.header 
    { 
     background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat; 
     width: 100%; 
    }

[HTML]

<div class="header"> 
</div>

Что я делаю неправильно? Заранее спасибо.

источник

2014-09-27 Yous Bha

почему бы не просто добавить изображение в HTML вместо? – jean

Jean, потому что элементы пользовательского интерфейса должны быть фоном. Они не довольны. Встроенные изображения для контента. –

Я хочу добавить текстовое поле на изображении, поэтому –

фоновое изображение просто не свойство стенографии, таким образом, вы не можете использовать более одного значения:

.header 
    { 
     background-image: url('path.png');/* remove no-repeat from here*/ 
     background-repeat: no-repeat; /*use no-repeat here*/ 
     width: 100%; 
    }

Или использовать его как это:

.header 
    { 
     /*short-hand method can have multiple values*/ 
     background: url('path.png') no-repeat; 
     width: 100%; 
    }

источник

2014-09-27 16:01:56

Хмм еще не работает –

Если я использую эту половину изображения, не отображается. –

Определите высоту .... –

элементов с фонами нужно иметь размеры. Они автоматически не подстраиваются под фоновое изображение.

.header 
    { 
     background-image: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat; 
     width: 100%; 
     height: ????? 
    }

источник

2014-09-27 16:02:01

Даже если я придаю ей высоту, полное изображение не помещается внутри DIV .. –

Что вы используете? Надеюсь, что не «100%». –

Попробуйте это:

.header 
    { 
     background: #FFFFFF url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') left center no-repeat; 
     width:100%; 
     height:431px; 

}

http://jsfiddle.net/csdtesting/eqzro6s3/1/

источник

2014-09-27 16:05:46

все изображение не отображается –

Измените высоту класса на 431px. –

Js Fiddle

.header{ 
     background: url('http://wpsites.net/wp-content/uploads/2013/12/Custom-Header-Image.png') no-repeat; 
     width: 100%; 
     height:432px; 
     }

изменить фоновое изображение: на фоне:

источник

2014-09-27 16:35:29

Css background-image не отображается вообще

ответ

Смежные вопросы