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:

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

Another option would also include:

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

Answer 2

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.