11

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

enter image description here

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

enter image description here

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?

user1283674
  • 339
  • 1
  • 5
  • 12
  • 1
    possible duplicate of [Stretch and scale CSS background](http://stackoverflow.com/questions/376253/stretch-and-scale-css-background) – FelipeAls Jan 18 '14 at 21:10

6 Answers6

21

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.

MMM
  • 7,221
  • 2
  • 24
  • 42
10

Another option would also include:

body{
   background-image:url("mybackground.jpg")
   background-size:contain;
   background-repeat:no-repeat;
}
Arthur Weborg
  • 8,280
  • 5
  • 30
  • 67
1

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

MDN documentation.

alex
  • 479,566
  • 201
  • 878
  • 984
1

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/

moodyjive
  • 1,807
  • 16
  • 17
0

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.

digitalextremist
  • 5,952
  • 3
  • 43
  • 62
0

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%
JMG
  • 164
  • 13
  • How do you know the width and height of the body in pixels? 320px, 2560px, absolutely any value in-between that is an integer? – FelipeAls Jan 18 '14 at 21:12
  • Use `background-size: 100%` – JMG Jan 18 '14 at 21:15
  • _absolutely any value in-between that is an integer?_ @FelipeAls Is this a question? – JMG Jan 18 '14 at 21:18
  • A badly worded remark: *it could be* any value between 320 and 2560 – FelipeAls Jan 18 '14 at 21:22
  • Here's the result with `background-size: 100%`: http://jsfiddle.net/6TT2v/ Fine if by miracle the image has the same ratio W/H as the page, otherwise... – FelipeAls Jan 18 '14 at 21:29
  • Looks like the width resizes fine, you arn't going to want to resize the height as well or the ratio will be warped so you would use `background-repeat: no-repeat` ...what's the issue? – JMG Jan 19 '14 at 00:41