SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with "background" images applied in divs not body

    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...mage-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...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 :P

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rickibarnes View Post
    I can't apply the image to the body element, it has to be in this div.
    Why? Because placing it on the body element is the screamingly obvious solution.

    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. #3
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 . . . :P

    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by rickibarnes View Post
    The reason I have those specifications is that ultimately, that will use a JS image slider to display more than one image
    Don't know if this helps, but Supersized sounds like a good fit for that.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •