Question

I’m trying to make a div with an image in it that I’m using as a background image. I’d like to give it a range, no smaller then 1000px and no bigger then 1500px width wise. I’d like it to be centered. I had thought I could just set it to align=”center” and style="max-width:1500px;min-width:1000px;overflow:hidden;" But this doesn’t seem to work, so I changed it, putting it inside a containing div align="center" and width 100% and put the overflow on this containing div instead. What ends up happening is it doesn’t center, it starts on the left and cuts off the right side and stays at a width of 1500px.
I’m not sure how to position this.

This is the url: http://www.klossal.com/portfolio/index_alt.html it’s the large image of the planet.

Answer 1

You’re sort of right, sort of wrong. First off, forget about “align=center”. You’re fighting CSS there.

What you want is something like this:

.examplediv {
     background: url(../images/planet.jpg) no-repeat center center;
     min-width: 1000px;
     max-width: 1500px;
     margin: 0 auto; /*this should center the div*/
    }

The margin: 0 auto; basically says “margin top and bottom: 0px” and “margin left and right: auto”, which the browser will fill in, centering your div.

You can see the concept, with a modified css declaration, here.