SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2009
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    changing background order...

    I have two overlapping divs, one's a smaller square. I want the background of the smaller, lower one to be behind the background of the first one.. but I'm not sure if it's possible, though I don't see why not.

    Code HTML4Strict:
    <body>
    <div id="container">
    <div id="header"></div>
    <div id ="content"><p>I am full of content</p></div>
    </div>
    </body>

    Code CSS:
    #container {
    margin: 0 auto; 
    width:1060px;
    background: url(layout/header.jpg) center top no-repeat; 
    height: 100&#37;; 
    position:relative; 
    z-index: 10;}
     
    #content {
    background: url(layout/stripes.gif) center top repeat; 
    width: 808px; 
    min-height: 600px; 
    margin: 0px auto; 
    position: relative; 
    z-index: -10;}

    with the z-index that way I'd expect the container background on top of the content background, but that doesn't seem to be the case. Is it because container is content's parent?

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe the container div and the way you have used position is the problem.

    This demo uses z-index to put the the "bg1" (green div) on top of the "bg2" (red div)

    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>
    <title></title>
    <style type="text/css">
     
    #container {
    position: relative}
     
    #bg1 {
    position: absolute; top: 0px; left: 0px;
    background-color: green;
    width:500px;
    height: 500px; 
    z-index: 10} 
     
    #bg2 {
    position: absolute; top: 0px; left: 0px;
    background-color: red;
    width:500px;
    height: 500px; 
    z-index: 5}
     
    </style>
    </head>
    <body>
    <div id="container">
     <div id="bg1"></div>
        <div id="bg2"></div>
    </div>
    </body>
    </html>

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by cutcopypaste View Post
    I have two overlapping divs, one's a smaller square. I want the background of the smaller, lower one to be behind the background of the first one.. but I'm not sure if it's possible, though I don't see why not.

    Code HTML4Strict:
    <body>
    <div id="container">
    <div id="header"></div>
    <div id ="content"><p>I am full of content</p></div>
    </div>
    </body>

    Code CSS:
    #container {
    margin: 0 auto; 
    width:1060px;
    background: url(layout/header.jpg) center top no-repeat; 
    height: 100%; 
    position:relative; 
    z-index: 10;}
     
    #content {
    background: url(layout/stripes.gif) center top repeat; 
    width: 808px; 
    min-height: 600px; 
    margin: 0px auto; 
    position: relative; 
    z-index: -10;}
    with the z-index that way I'd expect the container background on top of the content background, but that doesn't seem to be the case. Is it because container is content's parent?
    I'm puzzled by what you're trying to achieve. Your "content" div is contained within your "container" div. You've set the "content" div to be behind the "container" div, so unless the background image on the container has transparency, nothing from the "content" should show through. Do you want to post the URL and we'll see what's happening?

    Off Topic:

    As a general rule of thumb, any time you're setting a background image, you should also look at setting a background colour, that is as broadly similar to the image as possible, for those occasions when the image doesn't load, or at least is slow to load.

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

    The #content div will go behind the #container background if you simply remove the position:relative from #container and therefore lose the current stacking context. Otherwise you can't place a positioned child's background behind its positioned parent's background.

    However as Stevie D said above that will make the element invisible because it will be underneath the parent unless the parent is transparent. We may need to see an example of what you are trying to do to give better advice


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
  •