0

OK, this one works, the ocean picture shows up in the background but repeated 4 times to fill entire screen.

<style type="text/css">
   body {background-image:url('ocean.png');}
</style>
<body>

</body>

Then change to 

body {background-image:url('ocean.png') no-repeat center center;}

Now nothing shows up background picturewise.

titi
  • 1,025
  • 5
  • 16
  • 31
lilzz
  • 5,243
  • 14
  • 59
  • 87

4 Answers4

1

Because background-image can't take more paramters - change it to background: url..., which is the correct property to set all of those in one line.

body {background: url('ocean.png') no-repeat center center;}
Joe
  • 15,669
  • 4
  • 48
  • 83
  • OK, what about stretching it all the way vertical and horizontal to fill up the whole screen. body {background:url('ocean.png') no-repeat center center; width: 100%; height: 100%;} This won't work. – lilzz Feb 09 '12 at 02:45
  • Yep, because you're setting it to `no-repeat`. Change that to `repeat` and it'll repeat both horizontally and vertically. – Joe Feb 09 '12 at 02:47
  • I only want one instance of that picture to stretch all the way horizontal and vertical, – lilzz Feb 09 '12 at 02:52
  • CSS3: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm / CSS1/2: http://stackoverflow.com/questions/376253/stretch-and-scale-css-background – Joe Feb 09 '12 at 02:54
1

Try it this way:

body {
background: url('ocean.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Johannes Staehlin
  • 3,680
  • 7
  • 36
  • 50
1

Here's how you can do this and stretch it to the full height/width of the screen (note: if it is not the right proportion, some distortion will occur):

body {
background-image: url(ocean.png);
background-repeat: no-repeat;
background-size: 100%;
}

IIRC, background-size and being able to write url(...) without quotes are part of the CSS3 standard.

chucksmash
  • 5,777
  • 1
  • 32
  • 41
1

You can size the background image in the background property as follows:

background: url('ocean.png') no-repeat top center 100% auto;

or

background-size:100% auto;

The first parameter is for the width, the second for the height. The first example will put the image top center and stretch it to fill the browser window in width, and set the height proportionately. You can also use "cover" in place of "100% auto" and the browser will fill the image in whatever way it needs to to fill your background.

Note: this is CSS3, and as such the background-size propery will only work in newer browsers, IE9, Firefox 4, ect.

Adam
  • 61
  • 3