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

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)