CODEWITHSUNDEEP
htmlcssbackgroundstretch
Johnny
Johnny

Reputation: 612

Fixed background image with full window stretch and fit with no repeating when scrolling?

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(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*/

}

Upvotes: 0

Views: 661

Answers (1)

Amjad
Amjad

Reputation: 68

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 }

https://jsfiddle.net/y3cobhp1/1/

Upvotes: 2

Related Questions