html - Sizing background image CSS -

html - Sizing background image CSS -

i trying include background image html header not working way want to.

header:

<header class="background_image"> </header>

currently image appears when css so:

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

even portion of image displayed

i've looked around , tried adding different combinations css properties such as:

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

but each 1 of them has imagine in lean line. @ first thought image wasnt beingness loaded think sliver of beingness shown assume lean black line

i think have answered own question, < header > needs have height property apply visible background image.

standards suggest not possible auto adjust selector background image size using css ... if after.

that beingness said, depending on rest of layout ... check out snippet (also on jsfiddle):

class="snippet-code-css lang-css prettyprint-override">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) */ } class="snippet-code-html lang-html prettyprint-override"><div></div>

html css