Problems with "background" images applied in divs not body

HTML & CSS
1

Hi everyone,

I have two different scenarios that throw up two different issues, I’ve been racking my brains trying to think of solutions but I can’t come up with anything. It could be that I’m missing something obvious, or it could be that it’s a bit of a challenge. I’ve made a couple of really simplistic examples so the code/issues can be easily seen.

Scenario one: An image inside of a div, absolutely positioned with negative margin and left positioning to always centre the image.
Example here: http://lateralaspect.com.au/tools/bg-problem-image-html.html
Problem: The horizontal scrollbar appears at widths less than 1750px.
Example of problem: http://lateralaspect.com.au/tools/bg-image-prob-01.jpg

The behaviour I want is for the image to fall off both sides of the page equally, with no scrollbar - as would happen with a normal background image. I can’t set the background image in CSS, because that doesn’t fit with what I’m trying to achieve here. I don’t want to use overflow-x:hidden; because I don’t think that’s very good usability. Any other suggestions would be welcome!

Scenario two: A background image applied through CSS but on a div rather than the body element.
Example here: http://lateralaspect.com.au/tools/bg-problem-image-css.html
Example of problem: http://lateralaspect.com.au/tools/bg-image-prob-02.jpg
Problem: As you shrink the window the image falls off both sides of the page, as required. However when you go smaller than the width of the content (960px) and the scrollbar appears, the image stays at the size of the window - when you scroll sideways no more image appears.

I want this image to behave exactly how a background image applied to the body element would - the image appearing when horizontal scrolling comes into play. I can’t apply the image to the body element, it has to be in this div. Once again, any suggestions would be welcome if there are any!

Thanks in advance for any brain power extended this way :stuck_out_tongue:

2

Why? Because placing it on the body element is the screamingly obvious solution. :slight_smile:

To stop the white space on the right when you scroll, you’d have to set the #background div to min-width: 1750px, but then it’s too wide for most screens anyhow, meaning that you’ll get scroll bars.

3

Well, in this particular instance it is because I’m styling up a Magento template, and using the page-specific class applied to the main wrapper to give each page a different background through CSS. I also want the page background to be textured, so it’s convenient for that too.

Your answer gives me the solution, though - I don’t need the whole image to be visible, I just want the white background to not be there for resolutions less than the content width, in which case I can set the #background div min-width:960px; and it does exactly what I want! I had a feeling it was going to be something blindingly simple . . . :stuck_out_tongue:

Any ideas for Scenario one? The reason I have those specifications is that ultimately, that will use a JS image slider to display more than one image, so I really need it set up that way (unless there’s a solution out there I don’t know about).

Thanks for your input!

4

Don’t know if this helps, but Supersized sounds like a good fit for that.