CODEWITHSUNDEEP
htmlcss
Prarthana Hegde
Prarthana Hegde

Reputation: 361

Set background image to cover according to viewport size

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!

Upvotes: 0

Views: 22438

Answers (3)

pconnor88
pconnor88

Reputation: 365

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;

Upvotes: 9

Prarthana Hegde
Prarthana Hegde

Reputation: 361

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! :)

Upvotes: 1

Tuhin
Tuhin

Reputation: 3373

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

Upvotes: 2

Related Questions