Stretch and scale a CSS image in the background - with CSS only

Question

I want that my background image stretch and scale depending on the browser viewport size.

I\'ve seen some questions on Stack Overflow that do the job, like

Answer 1

The following worked for me.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

that worked to cover the entire background on different dimensions

Answer 2

I used a combination of the background-X CSS properties to achieve the ideal scaling background image.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

This makes the background always cover the entire browser window and remains centered when scaling.

Answer 3

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

Answer 4

You can actually achieve the same effect as a background image with the img tag. You just have to set its z-index lower than everything else, set position:absolute and use a transparent background for every box in the foreground.

Answer 5

You can add this class into your CSS file.

.stretch {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

It works in:

• Safari 3 or later
• Chrome Whatever or later
• Internet Explorer 9 or later
• Opera 10 or later (Opera 9.5 supported background-size, but not the keywords)
• Firefox 3.6 or later (Firefox 4 supports non-vendor prefixed version)

Answer 6

Using the code I mentioned...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

That produces the desired effect: only the content will scroll, not the background.

The background image resizes to the browser viewport for any screen size. When the content doesn't fit the browser viewport, and the user needs to scroll the page, the background image remains fixed in the viewport while the content scrolls.

With CSS 3 it seems this would be a lot easier.