SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Location
    Where I lay my head is home
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Overflow Background Image Outside Div

    I'm trying to get a background image to flow outside of it's parent div boundaries. Here's what I've tried so far:

    1. Overflow:visible
    2. Padding right and left.
    3. z-index

    None of these have worked. Does anyone know what I'm missing?

    It's the #blog-banner that I'm trying to get the background image to flow outside of the parent div boundaries.

    A little code to wet your whistle:

    HTML Code:
    <div id="wrapper">
    <div id="main">
    ....content stuff
    <div class="leaderboard">
    ...content stuff
    <div id="blog-banner" ></div>
    </div>
    </div>
    </div>
    Code CSS:
    #wrapper{
    width:960px;
    margin:10px auto 0;}
     
    #main{
    clear:both;
    overflow:hidden;}
     
    .leaderboard{
    margin-bottom:20px;
    border-bottom:1px solid #e3e3e3;
    padding:10px 0 30px;
    position:relative;}
     
    #blog-banner {
    width:1000px;
    height:100px;
    background:url(images/blog-banner.png) 
    no-repeat;
    position:absolute;
    left:-50px;
    top:110px;
    padding:0 50px;}

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    Move your #blog_banner div completely outside of the nested divs.




    .

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Location
    Where I lay my head is home
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply John!

    But if I place the #blog-banner div outside of the nested divs, then there's a problem with the it's position. The background image will shift when the screen is resized. I needed to use a parent div set to position:relative; with the #blog-banner set to position:absolute; in order to get it to be consistently placed across screen sizes, right?

    With #blog-banner outside of any parent div's, position is out of whack.

  4. #4
    SitePoint Member
    Join Date
    Jun 2010
    Location
    Where I lay my head is home
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I got it figured out, thanks to John....

    I moved the #blog-banner to below the #wrapper. Added relative positioning to #wrapper and absolute position to #blog-banner. Then it was simply a matter of adjusting the top and left placement.

    Here's the code to:

    HTML Code:
    <div id="wrapper">
    <div id="blog-banner" ></div> <!-- moved -->
    <div id="main">
    ....content stuff
    <div class="leaderboard">
    ...content stuff
    </div>
    </div>
    </div>
    Code CSS:
    #wrapper{
    width:960px;
    margin:10px auto 0;
    position:relative;}
     
    #main{
    clear:both;
    overflow:hidden;}
     
    .leaderboard{
    margin-bottom:20px;
    border-bottom:1px solid #e3e3e3;
    padding:10px 0 30px;
    position:relative;}
     
    #blog-banner {
    width:1000px;
    height:100px;
    background:url(images/blog-banner.png)
    no-repeat;
    position:absolute;
    left:-20px;
    top:700px;}

  5. #5
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,578
    Mentioned
    62 Post(s)
    Tagged
    3 Thread(s)
    Check out http://w3schools.com

    PHP Code:
    Property Values

    Value    Description
    absolute    
       Generates an absolutely positioned element
    positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties

    fixed
         Generates an absolutely positioned element, positioned relative to the browser window. The element'
    s position is specified with the "left""top""right", and "bottom" properties

    relative
        Generates a relatively positioned element
    positioned relative to its normal positionso "left:20" adds 20 pixels to the element's LEFT position

    static    
        Default. No position, the element occurs in the normal flow (ignores any top, bottom, left, right, or z-index declarations)

    inherit
        Specifies that the value of the position property should be inherited from the parent element 


    .

  6. #6
    SitePoint Member
    Join Date
    Jun 2010
    Location
    Where I lay my head is home
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I got it. Thanks!


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
  •