PDA

Click to See Complete Forum and Search --> : Background image that overhangs container but doesn't affect page width?

bunner bob
01-27-2009, 05:57 PM
Howdy,

I'd like to be able to position a background image so that it overhangs its container (to the right side) but doesn't cause the browser to "see" the container as any wider than it is.


// HTML

<body>
<div id="container">

<div id="overhangThing"></div>

// rest of site content

</div>
</body>

// CSS
#container {
width: 600px;
margin: 0 auto;
position: relative;
}

#overhangThing {
width: 400px;
position: absolute;
top: 0;
left: 400px;
background: transparent url("images/400PixelWideImage.gif") 0 0 no-repeat;
}

Since #overhangThing is 400 wide and positioned at 400, it is telling the browser that it should be adjusting for 800px wide content. Thanks to the absolute positioning of #overhangThing, #content div stays centered but a horizontal scrollbar appears when the window is less than 800px wide. I want the overhang portion to behave as a background image, and not affect the way the browser perceives the content width.

Any suggestions?
Chazzl
01-27-2009, 06:14 PM
Heyas Bob,

Give this a try:

body {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}


— Chazz L
bunner bob
01-28-2009, 03:57 AM
Well, I actually ended up going about it a different way. Since #container is centered within body, I just made my background image wide enough to overhang #container the same amount on both sides (blank space on the left, image on the right), then set it as background for body with the horizontal position as "center". It only gets a little odd when the window is narrower - then the background moves leftwards somewhat, but it's still acceptable.

But thanks for the help - I'll give this a try anyway just so I understand how it works :)

- Bob