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

HTML & CSS
1

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 :blush:

Thanks very much!

2

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.
3

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

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 :slight_smile:

Thank you very much for the help!

5

Thanks for letting us know, kycomputing. Glad we could help, and hope to see you back! :slight_smile: