css - how to stretch and auto-resize background im

Question

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

This is the picture i want stretched across the browser window:

My external CSS contains the code below:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg")} 

Can anyone tell me how I can edit the CSS file to fix my problem?

Answer 1

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 2

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 3

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 4

Another option would also include:

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

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

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

MDN documentation.