object-fit
https://css-tricks.com/almanac/properties/o/object-fit/
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 }
https://jsfiddle.net/y3cobhp1/
& what you looking for exactly below
.object-fit_fill { object-fit: fill }
OR
.object-fit_cover { object-fit: cover }
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:
My css code:
body, html {
width: 100%;
height: 100%;
margin: 0;
background: url(https://i-cdn.phonearena.com/images/article/125256-two_lead/Android-11-R-Preview-A-quality-of-life-update.jpg);
-webkit-background-size: cover; /* For WebKit*/
-moz-background-size: cover; /* Mozilla*/
-o-background-size: cover; /* Opera*/
background-size: cover; /* Generic*/
}
Try to add background-repeat: no-repeat; and background-attachment: fixed;
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.
Ok. The horizontal stretching works. But the vertical stretching is not working:
@Johnny try with this