On 1/15/07, Christian Kavanagh <[EMAIL PROTECTED]> wrote:
> Dear list,
>
> On this page:
> http://www.polarissc.com/hr.html
>
> I have two "background" images (only one of which is actually a
> background image in the body tag): gradient.png and greensmoke.jpg .
>
> Here's the relevant code:
>
> <style type="text/css">
> body {
> background-image: url(images/gradient.png);background-repeat: repeat-
> x;background-position: left bottom; background-attachment: fixed; z-
> index: 1;
> }
> </style>
>
> <body>
> <img src="images/greensmoke.jpg" width="955" height="600"
> style="position: absolute; top: 0; left: 0; z-index:0; visibility:
> visible;" />
> </body>
>
> What I'd like is for GRADIENT to have a higher z-index than
> GREENSMOKE, but I can't seem to make that happen: only the opposite.
1) Gradient appears to be an opaque image, therefore if displayed in
front of greensmoke it would obscure it. hence I doubt if you really
want that.
2) The concept of z-index only applies to elements, not to background
images. background images are stacked according to the elements which
contain them
>
> Considerations:
> 1). GRADIENT must be a real background image, because I need it to
> be fixed at the bottom of the viewport and IE6 can't seem to handle
> that any other way.
>
> 2). I tried making GREENSMOKE a background image also, but it just
> stopped displaying GRADIENT when I'd done so.
>
> Can anybody help me?
I think you want soemthing like the following:
<style type="text/css">
body {
background: #fff url(images/gradient.png) repeat- x left bottom fixed;
margin:0; padding:0; }
.outer { background: url(images/greensmoke.png) no-repeat top left; }
</style>
<body>
<div class="outer">
[...rest of page]
</div>
</outer>
2 background images => 2 elements to attach them to (until everyone
supports the incomplete Css3 background module).
I've zeroed the margins on body to correctly position .outer, hence if
you were depending on any explicit padding on body you would need to
add that padding to .outer.
Note the colour added to the body background - this will avoid chunks
of whatever non-white bg colour the user has defined appearing between
the images.
--
Richard Grevers, New Plymouth, New Zealand
Hat 1: Development Engineer, Webfarm Ltd.
Hat 2: Dramatic Design www.dramatic.co.nz
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
