SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Absolute background div

    Hello, I'm having trouble getting my background layer to show up behind my content. How do I get this to work? Here's my code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <style>
        #Shell {
            width: 760px;
            margin: 0px auto;
        }
        #Background {
            position: absolute;
            top: 0px;
            left: -50%;
            width: 1024px;
            height: 600px;
            background: #cccccc;
        }
        </style>
    </head>
    <body>
    
        <div id="Shell">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus dignissim mauris at leo. Praesent nonummy tincidunt nisi. Integer non odio eget ligula malesuada consequat. Vestibulum nisl ligula, cursus at, dapibus id, semper fermentum, dui. Proin eget diam. Cras accumsan pharetra est. Etiam malesuada laoreet mi. Praesent tincidunt feugiat nulla. Cras justo. Cras sodales nonummy nibh. Pellentesque tincidunt.</p>
            <p>Maecenas vehicula. Curabitur at risus tincidunt nisl elementum cursus. Cras pede quam, facilisis id, sollicitudin a, malesuada semper, lacus. Fusce elementum aliquam quam. Vestibulum ac est. Donec pulvinar. Proin massa mi, vehicula eget, accumsan at, aliquam vel, purus. Cras vitae orci id tellus malesuada posuere. Vivamus nec erat et odio semper volutpat. Sed imperdiet convallis pede. Ut dapibus felis vitae justo. Cras vitae lacus vel mi consequat sodales.</p>
            <p>Morbi in ipsum vitae turpis euismod facilisis. Donec vitae eros at orci lobortis scelerisque. Nunc sed metus. Curabitur tincidunt aliquet quam. Vestibulum in sapien quis ligula pharetra suscipit. Nulla convallis orci ac urna. Mauris libero ligula, tristique sit amet, fermentum ac, condimentum vel, neque. Vivamus sit amet neque sit amet eros feugiat aliquam. Vivamus in metus. Fusce pharetra, enim quis rutrum aliquam, turpis nulla elementum mi, sit amet vestibulum sem mi sit amet felis. Nulla in diam.</p>
            <p>Duis condimentum sollicitudin felis. Cras risus sem, porttitor in, sagittis a, ullamcorper at, enim. Curabitur ac diam vitae mauris blandit suscipit. Aenean scelerisque fringilla dui. Nullam pellentesque, felis sit amet fringilla aliquet, nibh nibh tristique mi, vitae iaculis erat massa in mauris. Mauris commodo dui vel sapien. Sed fermentum lectus sed tortor. Morbi et ligula. Duis adipiscing pulvinar augue. Nulla pulvinar porta nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce luctus porta risus. Pellentesque commodo, massa in tempor porttitor, nunc sapien sollicitudin ante, eu mattis lorem magna id nulla. Morbi vitae odio a urna vehicula condimentum. Phasellus pede. Fusce ullamcorper pede iaculis est porttitor porta. Cras tincidunt ultrices erat.</p>
            <p>Curabitur lobortis nibh eu nunc. Vivamus laoreet tincidunt eros. Aenean convallis, purus in vehicula gravida, elit ante aliquam augue, nonummy aliquam massa nibh at est. Vivamus placerat euismod lorem. Aliquam nunc. Nam porta, nisl a nonummy ornare, nunc lorem eleifend nisi, in aliquam sem velit sed risus. Integer orci dolor, mattis scelerisque, sagittis id, consectetuer et, dolor. Donec eleifend, mi ac facilisis viverra, pede lectus iaculis ipsum, eu congue nulla justo adipiscing ipsum. Mauris tincidunt elementum lectus. Sed blandit. Suspendisse pharetra rhoncus elit. Integer sodales nisi ut erat.</p>
        </div>
    
        <div id="Background"></div>
    
    </body>
    </html>
    I want the background layer to be on a percentage along the x axis because it needs to lineup with the design. Thanks.

  2. #2
    SitePoint Enthusiast ComputerGuru247's Avatar
    Join Date
    Jul 2006
    Location
    Wisconsin
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    old
    Code:
    #Background {
      position: absolute;
      top: 0px;
      left: -50%;
      width: 1024px;
      height: 600px;
      background: #cccccc;
     }
    new
    Code:
    #Background
    {
     background-color:#cccccc;
     margin:0px auto;
     text-align:left;
     width:1024px;
     height:600px;
    }
    This will center it correctly and should work. If this doesn't work please explain a bit more clearly and/or present a demonstration.

    Hope this helps.
    Bryan

    Breakpoint Designs - Web Design, Logos, and more!

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I already understand how to center my background element. I'm trying to get the Background element BEHIND the Shell element. Let me know your thoughts, thanks.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried adding position: relative; and z-index: 1 to the #shell?

  5. #5
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is it your trying to achieve design wise?

    It seems a funny way of doing things if you just want to have 'div#shell' with a grey background.

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In this instance I'm trying to accomplish getting the Shell element to lay directly overtop of the Background element.

  7. #7
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, but is there any particular reason?

    Perhaps I didn't make my self clear when I said 'design wise'... have you got a design / image that shows the end result your trying to get too?

  8. #8
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    448
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really, just imagine the gray layer is some type of image I guess. It really is irrelevant here. It's as simple as the text needs to be over the gray layer. That's it. Thanks.

  9. #9
    SitePoint Enthusiast Northern Star's Avatar
    Join Date
    Aug 2006
    Location
    Cheshire, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In that case, I'd create an image that was 512px (w) x 1px (h) solid #CCCCCC and do the following...

    Code:
        body {
            background: url(greyimage512x1.gif) repeat-y 0 0;
        }
        #Shell {
            width: 760px;
            margin: 0px auto;
        }
    Using the 'div#background' seems a messy way to do it if your just wanting the grey strip down the left-hand side to repeat down the page behind your content.


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
  •