MyNet MyNet - 2 months ago 8
CSS Question

Add streched image as div/site background

Trying to do this with that code:

#background {
background-image: url(background_image.jpg);
background-size: 100%;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}


But the problem is that when I scroll down the site there is not image but empty white area. How could I fix it?

Answer

Why not try this?

body {
   background-image: url("background_img.jpg");
   background-size: 100vw 100vh;
   background-attachment: fixed;
}

vw is viewport width, i.e. the width of the device screen. vh is viewport height, i.e. the height of the device screen.

With the property of background-size: 100vw 100vh the background image is automatically going to resize to the size of the users device screen.

Comments