How can I place an background image ontop of an image?

[midi25]

Hi this may sound strange. But I have a page that contains text and images. I want to be able to apply my transparent grid line gif image to the site and have it repeat. This is no problem as I have achieved this. But the images on my site are above the background image when I do this.

How can I send the image behind my background layer.

Thanks

[createErrorMsg]

How can I send the image behind my background layer.

You can't. That's why it's called a background image.

You could absolutely position a div overtop of your whole layout with a high z-index then apply the grid as BG on that, but this would place the grid above your text, too. It would also make your links unclickable, your text unselectable, your forms unfilloutable, etc.

cEM

[midi25]

mmm. I,m will re think. My layout. Thanks

[Sharper]

Try setting a low z-index on the images, a middle one on the div with the "background" image and a third higher z-index on the rest of the content. That should do it.

Of course, that process may put constraints on how you layout everything else, so it may not be worth it in any case.

[davidbraun]

You could (partially) achieve this by adding something like

<div
style="position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: url(../path/gridthing.gif)">
</div>

to your page, make sure it is the last item before the </body>-element...

===== _BEWARE_ =====
Absolute positioning seems to be an issue with (at least) MSIE/Mac (as far as I know, this beast isn't really capable to correctly render absolute positioned element of any kind, at least I couldn't do it...)