SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to get a background repeat beyond the inherited width

    Hi

    say I had an overall #wrapper {width:900px}

    inside it, in the middle of the page I had a div named #features. Now the width of this div is inherited by the #wapper.

    is there a way to get the background of the #features div to repeat outside of the 900px limitation?

    this is the illustrated idea: layout - Minus

    in which case I would need the faded red to appear on the page. but because of the #wapper limitation that does not show

    is there a way to achieve this?

    thanks a lot

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't. Assign faded background image to body and position it so it would match your second background image in #wrapper

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

    If you need a fluid (unknown height and position) you could do it using massive negative margins and hiding the overflow but wouldn't really be that stable and needs a few hacks.

    e.g. like this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0
    }
    h1, h2, h3 {
        text-align:center;
        margin:0 0 1em
    }
    #wrap {
        width:100%;
        overflow:hidden;
        min-width:970px;
        position:relative;/* ie7 won;t hide scrollbars without this*/
    }
    #outer {
        width:960px;
        margin:auto;
        border:5px solid #000;
        background:#fcf;
        padding:1px 0;
    }
    .feature {
        margin:0 -2000px;
        background:#FF9999;
        min-width:970px;
        zoom:1.0;/* ie6/7 won't show background without this*/
        position:relative;/* ie6/7 won't show background without this*/
    }
    .inner {
        background:red;
        width:960px;
        margin:auto;
        border-right:5px solid #000;
        border-left:5px solid #000;
    }
    </style>
    </head>
    <body>
    <div id="wrap">
        <div id="outer">
            <h1>Heading</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in orci fringilla elit pulvinar congue. Pellentesque sagittis eros eu libero commodo malesuada. Nunc eros velit, pretium rutrum volutpat eget, tempus id metus. Cras mollis iaculis mollis. Cras placerat, massa vitae scelerisque mattis, ipsum mi imperdiet dui, nec congue nibh ipsum eu odio. Integer eu feugiat arcu. Vivamus ultricies semper odio et pulvinar. In et purus vel orci molestie facilisis non quis magna. Phasellus varius congue nibh, non rhoncus nulla facilisis eget. </p>
            <div class="feature">
                <div class="inner">
                    <h2>Feature</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in orci fringilla elit pulvinar congue. Pellentesque sagittis eros eu libero commodo malesuada. Nunc eros velit, pretium rutrum volutpat eget, tempus id metus. Cras mollis iaculis mollis. Cras placerat, massa vitae scelerisque mattis, ipsum mi imperdiet dui, nec congue nibh ipsum eu odio. Integer eu feugiat arcu. Vivamus ultricies semper odio et pulvinar. In et purus vel orci molestie facilisis non quis magna. Phasellus varius congue nibh, non rhoncus nulla facilisis eget. </p>
                </div>
            </div>
            <h3>Lower heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in orci fringilla elit pulvinar congue. Pellentesque sagittis eros eu libero commodo malesuada. Nunc eros velit, pretium rutrum volutpat eget, tempus id metus. Cras mollis iaculis mollis. Cras placerat, massa vitae scelerisque mattis, ipsum mi imperdiet dui, nec congue nibh ipsum eu odio. Integer eu feugiat arcu. Vivamus ultricies semper odio et pulvinar. In et purus vel orci molestie facilisis non quis magna. Phasellus varius congue nibh, non rhoncus nulla facilisis eget. </p>
        </div>
    </div>
    </body>
    </html>
    Much better instead to do it in sections like this.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0
    }
    h1,h2,h3{text-align:center;margin:0 0 1em}
    .outer {
        width:960px;
        margin:auto;
        border:5px solid #000;
        background:#fcf;
        padding:1px 0;
    }
    .feature {
        width:100%;
        background:#FF9999;
        min-width:960px;
    }
    .feature .outer {
        background:red;
        border-top:none;
        border-bottom:none;
    }
    .top{border-bottom:none;}
    .base{border-top:none}
    </style>
    </head>
    <body>
    <div class="outer top">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in orci fringilla elit pulvinar congue. Pellentesque sagittis eros eu libero commodo malesuada. Nunc eros velit, pretium rutrum volutpat eget, tempus id metus. Cras mollis iaculis mollis. Cras placerat, massa vitae scelerisque mattis, ipsum mi imperdiet dui, nec congue nibh ipsum eu odio. Integer eu feugiat arcu. Vivamus ultricies semper odio et pulvinar. In et purus vel orci molestie facilisis non quis magna. Phasellus varius congue nibh, non rhoncus nulla facilisis eget. </p>
    </div>
    <div class="feature">
        <div class="outer">
            <h2>Feature</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in orci fringilla elit pulvinar congue. Pellentesque sagittis eros eu libero commodo malesuada. Nunc eros velit, pretium rutrum volutpat eget, tempus id metus. Cras mollis iaculis mollis. Cras placerat, massa vitae scelerisque mattis, ipsum mi imperdiet dui, nec congue nibh ipsum eu odio. Integer eu feugiat arcu. Vivamus ultricies semper odio et pulvinar. In et purus vel orci molestie facilisis non quis magna. Phasellus varius congue nibh, non rhoncus nulla facilisis eget. </p>
        </div>
    </div>
    <div class="outer base">
        <h3>Lower heading</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in orci fringilla elit pulvinar congue. Pellentesque sagittis eros eu libero commodo malesuada. Nunc eros velit, pretium rutrum volutpat eget, tempus id metus. Cras mollis iaculis mollis. Cras placerat, massa vitae scelerisque mattis, ipsum mi imperdiet dui, nec congue nibh ipsum eu odio. Integer eu feugiat arcu. Vivamus ultricies semper odio et pulvinar. In et purus vel orci molestie facilisis non quis magna. Phasellus varius congue nibh, non rhoncus nulla facilisis eget. </p>
    </div>
    </body>
    </html>
    It just means you close the outer before you start the next 100% wide element.

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to both,

    Paul O'B that is very helpful.

    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
  •