CSS querie: foreground images over background images?

Discussion in 'Web Design and Development' started by eclipse, Feb 7, 2009.

  1. eclipse macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #1
    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
     
  2. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #2
    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
     
  3. eclipse thread starter macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney

Share This Page