SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast kycomputing's Avatar
    Join Date
    May 2002
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Fixed position and tiled background (workaround for CSS3 multi background)?

    It's been quiet some time since I've posted here, but I have come up on issue and was hoping someone here may know of a solution. I couldn't find anything really specific to my situation and was hoping I may be overlooking something.

    Background: I am trying to find a way to have a graphic centered, with a fixed position behind my site content (centered and top). Behind that have a tiled background that would scale based on the user's display res.

    The only two things I can think of is the multiple backgrounds with css3, which I can't really do because of the lack of older browser support or use a single image for the background. Of course, when I do the latter, there's simply no way that I can find to size it to meet the majority of visitors' display resolutions -when it scales the majority of the image is lost behind my main site content.

    Sorry for the winded post. I did attach a screenshot of what I was referring to in case the above doesn't make sense

    Thanks very much!



    example_BG2.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    An easy way to do that would be:

    - create a 100% wide div to hold the gradient background.
    - inside that, place the fixed width image.
    - underneath, have another 100% wide div with the background texture fr the next section.
    - inside that, have the white content div.
    - place a negative top margin on the white content div to pull it up into position.
    - below everything, have a blue footer, 100% wide.
    - put a negative top margin on the footer to pull it up into position.
    - you may need to put position-relative and a z index on the white content div to make is sit above the footer.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,300
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The gradient could be applied to the body element to save a div and then the fixed background could be applied to a 100% high container (see CSS FAQ on 100% height for the code to do this - see my sig).

    The footer could be dragged up from beyond the (min-height) 100% container as Ralph suggests.

    The outer overlapping white background is a little awkward if you want the almost 100% height effect but could done with an extra element applying an absolute overlay to produce the white background.

    Here's a rough example that has all the elements you need. It will work in IE7 upwards and be usable in IE6 but not the same. See the FAQ on the sticky footer for how all these elements tie together as it is a little complicated and dimensions are critical.

  4. #4
    SitePoint Enthusiast kycomputing's Avatar
    Join Date
    May 2002
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry it has taken me so long to update, but work this week has been hectic, leaving little time for anything else. Using a combination from both of your responses I was able to achieve exactly what I was needing for the site. I only wish I'd asked sooner, could have saved the hair pulling

    Thank you very much for the help!

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,121
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Thanks for letting us know, kycomputing. Glad we could help, and hope to see you back!
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •