Centering CSS background image

Question

The website I'm working on, Tamsnails.com, is just about done, but it has one issue that I've been bothered with for a while now. The background image of the store will simply not stretch to the full screen of my high resolution work laptop. I've tried a lot of things over the last couple of months, a lot of which I forget, but

I remember at first, I had it as an actual css background-img

then, I had

<head>
<body id="theBody">
<div id="backgroundImageWrapper" style="height: 100%; width: 100%; z-index: 0; position: absolute;">
<img id="mainBackgrond" src="background_image.JPG">
</div>

with mainbackground style

#mainBackgrond {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

Now, I have

<body id="theBody">
<img id="mainBackgrond" src="background_image.JPG">
<div id="wrapper">

with style

#mainBackgrond {
    height: 50em;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

because this at least looks good on my home laptop.

Yes, I know I spelled 'mainBackgrond' wrong.. bear with me here!

score 1 · Answer 1 · answered Jul 09 '11 at 01:56

1

If the issue is that the image doesn't stretch to the bottom of the window (which is what I'm seeing in Chrome) then change the height: 50em on your #mainBackgrond style to:

height: 100%;

answered Jul 09 '11 at 01:56

Town

14,706
3
48
72

Have you tried to change this in inspector? I believe I already tried that, and it will actually squish the image up into the top. – marklar Jul 09 '11 at 01:58
@marklar: Yeah I have, it looks fine to me. The image aspect ratio is all over the place but that's what you get if you want to stretch the image to fit any size of window! :) – Town Jul 09 '11 at 01:59
Well, in firebug, it's fitting the image to the size of the browser, but the browser still allows vertical scrolling, and underneath there is just gray background. I suppose I would want it to fill the rest of that too, because if someone has a small screen like mine, they'll need to scroll down. – marklar Jul 09 '11 at 02:07
@marklar: I see what you mean now, I'd gone for a large screen window size after you said you saw the problem on a hi-res monitor! SirNickity's HTML5 solution works well, if that's feasible for you. – Town Jul 09 '11 at 02:43

score 1 · Answer 2 · answered Jul 09 '11 at 02:42

1

You might want to take a look at this ( or other similar jquery plugins )

http://srobbin.com/blog/jquery-plugins/jquery-backstretch/#demo - Quite simple to use and it stretches the background image fully without risking the aspect ratio.

answered Jul 09 '11 at 02:42

Joonas

7,227
9
40
65

score 0 · Answer 3 · answered Jul 09 '11 at 02:43

Try to remove the height property, this way it will maintain the aspect ratio and stretch all the way across the screen, if this is the intent.

#mainBackgrond {
  position: fixed;
  z-index: -1;
  width: 100%;
  left: 0px;
  top: 0px;
  background: url(/background_image.JPG) no-repeat center center fixed;
}

The background image itself is huge, and makes initial load time very slow, you should consider compressing it more or resizing.

also have a look at css media query a nice way to show different size background images for visitors with smaller screens that might not even have the resolution to see the background.

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Centering CSS background image

3 Answers3