css - how to stretch and auto-resize background image

Question

I\'m trying to get my background image to stretch across the entire page, but so far i have this:

Answer 1

Have you tried using

background-size: 10px 10px

Change 10 to the width and height of the body

You can also do

background-size: 100%

Answer 2

Use background-size: cover. Note its browser support.

MDN documentation.

Answer 3

You need to make this an <img> tag, with a low z-index, with position: fixed and then for the <img> tag, use height: 100%; width: auto or the opposite.

This method is cross-compatible for all browsers.

Answer 4

You can use:

background-size: cover;

However please bear in mind which browsers this supports. For example, this won't work in IE8 and below.

Answer 5

Background size will do the trick:

    body { 
     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;
   }

Check this out for more info: http://css-tricks.com/perfect-full-page-background-image/

Answer 6

Another option would also include:

body{
   background-image:url("mybackground.jpg")
   background-size:contain;
   background-repeat:no-repeat;
}