SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Background Image Layers

    Is it possible to place a CSS background image in front of your content using the Z-index. I've tried this but cant get it to work.

    I'm attaching a png background image to a wrapper, fixing it to the bottom of the screen, but can only get it set as a background, I'd like to get the content to disappear behind it if possible.

    Anyone done this before?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can't have the foreground content of an element go behind its own background.

    You could place a nested element behind its non positioned parent.

    e.g.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .outer {
        width:200px;
        height:200px;
        background:url(img.gif) no-repeat 0 100&#37;;
        border:1px solid #000;
    }
    .inner {
        position:relative;
        z-index:-1;
        width:200px;
    }
    </style>
    </head>
    <body>
    <div class="outer">
        <div class="inner">
            <p>Inner content goes here - inner content goes here Inner content goes here - inner content goes here Inner content goes here - inner content goes here </p>
        </div>
    </div>
    </body>
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •