Оценка размера изображения CSS

Question

Я пытаюсь включить фоновое изображение в свой HTML header, но он не работает так, как я этого хочу.

Заголовок:

<header class="background_image"> 

</header> 

В настоящее время изображение появляется только тогда, когда мой CSS, как так:

.background_image { 
    background-image: url(image-path("header-bg.jpg")); 
    height: 500px; 
} 

даже тогда отображается только часть изображения

Я смотрел вокруг и попытался добавить различные комбинации свойств CSS, таких как:

background-size: auto; 
width: 100%; 
position: absolute; 
top: 0; 
left: 0; 
background-size: cover; 
background-position: center center; 

Но каждый из них имеет воображение в очень тонкой линии. Сначала я думал, что изображение не загружается, но я думаю, что показывается только его лента, которую я предполагаю, это тонкая черная линия

Answer 1

Я думаю, вы сами ответили на свой вопрос, в < заголовка> потребности чтобы иметь свойство высоты, чтобы применить видимое фоновое изображение.

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

При этом, в зависимости от остальной части макета ... проверить этот фрагмент кода (также на jsfiddle):

div{ 
 
    background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-top: 66.64%; /* (img-height/img-width * width) */ 
 
       /* (853/1280 * 100) */ 
 
}

<div></div>

Answer 2

Что случилось с image-path("header-bg.jpg")?

Это было бы моим догадкой. Правильное форматирование изображения в CSS заключается в следующем:

background-image: url(path/to/image.png);

Как видно на этом примере:

.background_image { 
    background-image: url(http://placehold.it/1200x500); // <-- This right here. 
    height: 500px; 
} 

Кроме того, если это только что заголовок режет свой образ, я настоятельно рекомендую вам принять взгляд на background-size нечисловых свойств, таких как contain и cover