CSS querie: foreground images over background images?

[eclipse]

Hi all,
I thought there was a way to make background images actually "sit" in the background, and float other images over the top of them. (Whoops, "float" is the wrong term when discussing things in CSS! )

So I've got this bane of my life, the SMF forum I'm trying to do (when I should just be up to simple pages in XHTML and CSS!) but I keep forgetting the basics.

I want the "rusty" coloured Aussie rock to sit across the header, and scale with the forum width. But I also want a typography image to sit over it, AND a nifty little logo of the Australian continent (glowing a nice soft white). But I don't want them to "stretch" (or be width 100% as we discussed on a previous thread).

How do I place some images "on top" or "hovering over" this background image, so that even if the image is stretched the logo and type are not?

Should they be placed in the XHTML in a way that floats over the CSS background image? Heeelp! I thought I knew this stuff, but I think I'm forgetting it almost as fast as I'm learning it. (All part time you see).

http://lanksheardesign.com/beyond/index.php

 

[SrWebDeveloper]

If I follow you correctly, two things come into play. Positioning and z-index.

Wrap a div or assign an ID to your "floating" image.
Use absolute positioning if you want it placed in a set x,y area of the page.
Use relative positioning if you want it as part of the flow of the page, but still locked in one position, relative to a nearby div or element.
Set z-index for the "floating" image higher than any other elements that will display underneath to ensure it's always on top.

It's up to you as to which positioning type and z-index values, of course.

-jim

 

[eclipse]

Thanks Jim, I'll play with those features.