0

I have a webpage that I need to modify, the background, which is currently absolute positioned with z-index to push it back, needs to stay put when scrolling, i need to change it to fixed, yet doing so seems to break z-index and push the content below it vertically. Any ideas?

edit: OK I managed to get it to work in FF, but IE is still broken...

GeekGirl
  • 57
  • 1
  • 9
  • 1
    Have you some code or a link we can see? – Kyle Mar 03 '11 at 14:33
  • first off what z-index is it currently? and why not just set the background as a background-image of the body? – benhowdle89 Mar 03 '11 at 14:35
  • .MainBG_Gradiant_Top { float:left; width:100%; top:500px; left:0px; z-index:-1; height:90%; position:absolute; background-image:url('/images/portal/BodyGradiant.png'); background-repeat:repeat-x; } – GeekGirl Mar 03 '11 at 14:54
  • There is already a background image, this one should be going across the bottom of the page and staying there when scrolling. – GeekGirl Mar 03 '11 at 14:57
  • im trying to do something like this: http://www.quebecregion.com – GeekGirl Mar 03 '11 at 15:24

3 Answers3

6

Maybe look at the rules below for how elements are stacked. The Stacking order and stacking context rules below are from this link

Stacking Order within a Stacking Context

The order of elements:

  1. The stacking context’s root element (the <html> element is the only stacking context by default, but any element can be a root element for a stacking context, see rules below)
    • You cannot put a child element behind a root stacking context element
  2. Positioned elements (and their children) with negative z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)
  3. Non-positioned elements (ordered by appearance in the HTML)
  4. Positioned elements (and their children) with a z-index value of auto (ordered by appearance in the HTML)
  5. Positioned elements (and their children) with positive z-index values (higher values are stacked in front of lower values; elements with the same value are stacked according to appearance in the HTML)

When a Stacking Context is Formed

  • When an element is the root element of a document (the <html> element)
  • When an element has a position value other than static and a z-index value other than auto
  • When an element has an opacity value less than 1
  • Several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  • As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
Mr_Moneybags
  • 3,927
  • 3
  • 19
  • 15
2

Made a quick test. In its simplest form z-index doesn't break when using position: fixed;.

Kyle
  • 65,599
  • 28
  • 144
  • 152
0

Perhaps you can put the background that is already there in a wrapper for the whole page and use the gradient background on the body instead.

Depending on the gradient, you can also try using a css3 gradient on the background of the body (or simply multiple backgrounds...) and use css3pie to make it work in IE.

jeroen
  • 91,079
  • 21
  • 114
  • 132