I've been searching for a solution to this problem for a bit, and I would like to be able to do it entirely within CSS.

Essentially, I have a scalable layout with max and min widths, but I also want the background image to scale with the layout as well. I've managed to figure that out, but unfortunately the image doesn't want to center no matter what I do. It always wants to be top left.

Here's what I've got for the background image CSS.

#background img {
    position: absolute;
    z-index: -100;
    width: 130%;
    max-width: 1700px;
    min-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    margin: 0;
    padding: 0;
}

I've tried centering the background div that it's in, as well as using text-align: center; on the body as well.

At this point the site is in the proof of concept stage so yes it's buggy. Here's the site so you can see what I'm trying to do.

PS. If anyone is curious about the name of the site, it's a photography project I'm working on and I'm documenting where the shirts are made and their contents and will have all the statistics and information about them.

The problem is in the absolute positioning. When you use positioning you take that element out of the normal document flow. By default your image is set at top: 0 and left: 0, which is why you see it in the upper left.

You probably want to place the image inside a div and center the div. Set the image width to 100% and then it should scale with the div and the browser.

Originally Posted by vangogh

The problem is in the absolute positioning.

Without absolute positioning though the image ends up on top of everything else.

I have the image inside a div, and trying to center that div doesn't seem to work either. But I may not be doing it the right way.

The we really need to see the rest of the code to see what's going on with the document.

I've posted the link to the site above, and here's some more of the code.

body {
    background: #FFFFFF;
    font: 16px Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#background {
}

#background img {
    position: absolute;
    z-index: -100;
    width: 130%;
    max-width: 1700px;
    min-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    margin: 0;
    padding: 0;
}

#container {
    position: relative;
    margin: 0 auto;
    width: 80%;
    max-width: 1000px;
    min-width: 760px;
    height: 100%;
    text-align: left;
}

And the html where it's placed.

<div id="background">
<img src="images/background.jpg">
</div>

The way I would have set this up is to use the image as a background either on the body or a wrapper div and then place your content inside the wrapper div. The wrapper div would be centered.

The only limitation is the image wouldn't scale the way you want, but that's usually not an important thing to me.

What I think you're going to need to do is use % for the top and left to center your image instead of trying to use margins. Once you start using positioning the margins don't have the same meaning since the position element is no longer in the normal document flow. It's as though it's not there to other elements.

Try using % on the top and left for the image to see if you can center it that way.

Couple items I notice immediately are:

IE does not recognize MIN or MAX heights/widths.

The code you have provided renders differently cross browsers, so unless you omitted some of your CSS you need to zero-out these default settings which cause these errors - usually most annoying and apparent in IE.

Your actual image is 1424 height x 2000 width. Based on the width you have allowed, this image would always appear off-center even if somene actually had their screen resolution set to accommodate a view port that large.

My suggestion would be to place the image in the CSS as a background of the main divide, in this case #container. That way you would not have to use absolute positioning. There are several sticky threads posted in the lobby of the CSS forum that discuss issues inherent with using absolute which doesn't seem necessary for what you're after.

This quite possibly could create other issues for you, but it opens up more options for solutions.

CSS like...

 
#background {
height:130%;
width:130%;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    margin: 0;
    padding: 0;
  background: url(image/background.jpg) center center no-repeat;
}

HTML change to the #background divide, opposed to the whole #container. This way, your text will sit on-top of the image.

 
<div id="background">
<div id="menu">
<h1><a href="#">people</a></h1>
<h1><a href="#">fabrics</a></h1>
<h1><a href="#">stats</a></h1>
<h1><a href="#">resources</a></h1>
</div>
</div>

*simultaneous post with vangough.

Well, I've got it about 98% there, but yeah in IE it just doesn't work at all. Oh well, I'll have to abandon this direction. It was fun figuring it out though.

I ended up with a pretty convoluted solution. The only thing is at smaller screen widths the background shifts.

Here is how it looks now.

Here's the CSS I had to use. Does it make sense? No. Does it work? Sorta.

Thanks for the help.

#backgroundbox {
    text-align: center;
    z-index: -100;
    min-width: 1700px;
}

#backgroundmargin {
    margin: 0 auto;
}

#background {
    position: absolute;
    width: 140%;
    left: 50%;
    margin-left: -70%;
}

#background img {
    width: 97.5%;
    max-width: 1700px;
    min-width: 1300px;
}

Your page is looking pretty good. I am viewing in Firefox and not IE. What you're trying seems like it should be simple, but I think combining the scaling image with the image being in the background is harder than it looks.

At least you had fun with it and probably learned a few things.

Thanks vangogh, I quite like it as well. Pondering now whether I should have a static version only for IE, or go in a different direction.

You can tell I'm not a web designer, because there are many things that do not work with IE on that page.

PS. I was just in Lafayette, CO a couple weekends ago. Drove across country and stopped in to see friends. I spent a couple weeks there last year, would love to live in Boulder.

Lafayette, just down the road. Boulder is beautiful. I passed through town about 12 years and never left.

IE can be frustrating, but it's not as hard to work with as many make it out to be. You want to code to the standards. If you do your page will usually work with most browsers and then just need a few tweaks for IE. Then you can use conditional comments to serve IE and different versions of IE it's own unique stylesheet.

Another tip is to use a css reset which will set default values for things so they're the same across browsers.

It just takes a little practice and experience.