设置背景图像以根据视口大小进行覆盖

Question

With respect to the mentioned subject, I would like to know how to add code that will set the background image size to cover the window completely without the sides getting cut off. I have tried using height and width auto,cover and 100% but none are working.

Any help is appreciated. Thank you!

Answer 1

Use the CSS background-size property.

If you want your background image to fill the area to the minimum width/height use:

background-size: cover;

If you want your background image to fill the area as large as possible but still show all your image use:

background-size: contain;

Answer 2

html{ width:100%; height:100%; 
      background:#fff url(image.jpg) center center no-repeat;
      background-attachment: fixed;
      background-size:100% auto;
}

Answer 3

Actually, I found it! I used a div to wrap the whole content inside the body with the ID 'wrapper' and then used the following CSS code:

#wrapper
{
background-image: url('Media/bg.jpg');
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}

Thanks for all the help! :)