Background Image Does not Stretch

Question

I recieved this code looking for how to stretch background image in HTML for the part of my page, but it does not work. What am I doing wrong?

< style type="text/css">


<!--
body {
    background-image: url(at4.jpg);
    background-repeat: no-repeat;
    height: 100%;
         width: 100%;

 }
 -->
 </style>

Answer 1

Use background-size: 100%;

This will stretch your background image.

WORKING DEMO

The Code:

body {
    background-image: url(http://www.google.co.in/images/srpr/logo4w.png);
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-size: 100%;

 }

Hope this helps.

Answer 2

In CSS3, you can set the background-size :

body {
   background-size: 100%; 
}

It will work on Chrome >= 3.0, Firefox >= 3.6, IE >= 9.0 and Opera >= 10.

Here's a JSFiddle some examples of the property.

Answer 3

You can use (CSS3):

background-size:cover (will crop) or background-size: 100%; (will stretch)

Cross browser solution (< IE9)

http://jsfiddle.net/4gBXS/

#background {
    width: 100%; 
    height: 100%; 
    left: 0px; 
    top: 0px; 
}

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