How to set the background image to fit the browser window when it is resize?

user_3787028 0
Viewed 410

I'm building a small responsive page. On a page there is a background image with many buttons over it.

I added the following css to set the background image

.background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
}

My problem is that when I resize the browser window, the buttons get stacked vertically and then the user can navigate to the bottom where the background image ends and then the user can see a big white space.

I'd like the background image to resize to fit the browser window when it is resized.

Any idea?

EDIT: I tried your suggestion with no help. I put my code in a StackBlitz page: https://stackblitz.com/edit/angular-y1avtu?file=src%2Findex.html

Resize the window and you will see the buttons to stack verticaly then scroll down and you will see a large white portion of the web page. This is what I don't want.

angular responsive css html
3 Answers

Update your css as below :).

.background{
    height: 100vh;
    width: 100%;
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
user_137576250

not 100% sure but if the image was fixed and set to be the width and height of the page and a background-size set to cover, when the user scrolled the background would remain stationery and you wouldn't have to worry about the white space at the bottom.

user_139792670

remove width: 100%; from the style Click the expand snippet link to see the real results

.background{
     
    height: 100vh;
    
    background: url('https://images.pexels.com/photos/1563564/pexels-photo-1563564.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
  background-repeat: no-repeat;
    
background-size: cover;
}
<div class='background'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

user_41593180
Related