Solution 1 :


it’s the best choice for you that can stretch and fit 100%

.object-fit_fill { object-fit: fill }
.object-fit_contain { object-fit: contain }
.object-fit_cover { object-fit: cover }
.object-fit_none { object-fit: none }
.object-fit_scale-down { object-fit: scale-down }

& what you looking for exactly below

    .object-fit_fill { object-fit: fill }
    .object-fit_cover { object-fit: cover }

Problem :

I want to make a background image stretch and fit vertically 100% and horizontally 100% in the browser window. Always fixed. Also when the user scrolls down or up. The background image should fill the whole window. When browser window is resized, the background image should stretch and stay.

What I have so far after trying so many unsuccessful variations:

background image stretch

My css code:

body, html {
width: 100%;
height: 100%;
margin: 0;

  background: url(;
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover;    /* Mozilla*/
-o-background-size: cover;      /* Opera*/
background-size: cover;         /* Generic*/



Comment posted by ViLuWi

Try to add background-repeat: no-repeat; and background-attachment: fixed;

Comment posted by Johnny

Ok. Scrolling problem solved. But the image is not stretching, fitting the whole window? When I make the window smaller, then the image moves to right.

Comment posted by

Ok. The horizontal stretching works. But the vertical stretching is not working:

Comment posted by

@Johnny try with this