5 replies [Last post]
Alec Gorecki
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2010-03-21
Posts: 8
Points: 11

Okay,

I've been beating my head against a brick wall for the better part of the last three days, and I hope someone can help. Here's a description of my wall:

I want a background image larger than my content div.
(e.g. 1024x762 background image with a content div of 800x600)

I want the whole thing to center (horizontally) regardless of browser size, BUT when the browser window is SMALLER than the content div, I want the content div to left justify.

The best example of this behavior is the metromix.com website. Note that the content div location is locked relative to the background image, and that when the browser windows is SMALLER than the background, but LARGER than the content, there are no scroll bars.

My workaround has been to simply put a smaller div into a larger one, but this is not what I'm going for. And I am baffled.

Help, please!

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 12 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

why don't you just mimic that

why don't you just mimic that site?
Place a background image on the body - centered and use auto margins to center your content div

katierosy
katierosy's picture
Offline
newbie
Last seen: 12 years 9 weeks ago
Timezone: GMT+5.5
Joined: 2010-03-22
Posts: 1
Points: 1

Same as suggested by

Same as suggested by wolfcry911. Make that image background image of body tag & then set to your content dive and set margin: 0 auto; (left and right margin needs to be set as auto to center align container horizontally. same trick is applied to http://www.metromix.com as well.

By default if browser window width is less than content it'll align to left and a horizontal bar will appear.

-------------------------

Web Design and Development Company | Hire Web Developers

Alec Gorecki
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2010-03-21
Posts: 8
Points: 11

not quite

Thank you for replying!

I wish it were that simple. The problem is that this is NOT their trick.

If I do as you suggest, the content DOES hold left when the window is smaller than the content div, as desired (which is awesome, btw), BUT:
as you scale the browser window down, you'll notice that the content div SHIFTS relative to the background image. And herein lies the problem. If my background image is designed to hug the left and right side of the content div (for example (one image) 150px of detail / 800px of blank / 150px of detail), this does not work! Its fine if I have a monochromatic or vertically gradient background, but with specific graphics, as that site has, not so much.

I think its because the body's background image hugs left, just like the content div, and they have to shift relative to each other.

Any other ideas would be greatly appreciated!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 35 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Set the background on a

Set the background on a container, not body. Set a min-width on both body and container that is equal to the size of the content div. Otherwise what they have.

body {
  min-width: 800px;
}
#container {
  min-width: 800px;
  background: url(/image/background.jpg) 50% 0 no-repeat #000;
}
#content {
  width: 800px;
  margin: 0 auto;
}
 
...
 
<body>
  <div id="container">
    <div id="content">
    <!-- my content goes here -->
    </div>
  </div>
</body>
</html>

Alec Gorecki
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2010-03-21
Posts: 8
Points: 11

Genius!

Absolute genius!

I'm still trying to wrap my head around why this works, but its brilliant.
Exactly what i was going for, and so flipping simple!

I didn't even have to set a min-width for the content div, only the container.

Thank you thank you thank you.

This was one of those humps that you can't do anything else until you get past it.
I've been completely blocked and flummoxed. Now I'm free!

Genius!

Thanks!