css div + background-image

Question

I'd like to know what I am doing wrong regarding the use of background-image property, I want the picture to always be displayed in its full-size adjusted perfectly to its parenting div (no matter what kind of resolution it'd be displayed on), here's what I've got to so far, I am completely aware that the problem isn't that complex but I just cannot get through it! Thanks for any help.

 body { margin: 0px; } header { height: 200px; background-image: url(http://kingofwallpapers.com/picture/picture-008.jpg); background-size: cover; } 

 <header> </header> 

Answer 1

You're close. You just have to set background-size to contain. contain scales the background image to parent dimensions (without stretching, ie the smallest, either width or height.)

background-repeat is just for not repeating the background over and over again

 body { margin: 0px; } header { height: 200px; background-image: url(http://kingofwallpapers.com/picture/picture-008.jpg); background-size: contain; /* background-size: 100% 100%; <- stretch fit to parent */ background-repeat: no-repeat; } 

 <header> </header> 

Answer 2

instead of

background-size: cover;

you should use:

background-size: 100% 100%;

So I Think this code could help:

 body { margin: 0px; } header { height: 200px; background-image: url(http://kingofwallpapers.com/picture/picture-008.jpg); background-size: 100% 100%; } 

 <header> </header>