How to get a background repeat beyond the inherited width

HTML & CSS
1

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

You can’t. Assign faded background image to body and position it so it would match your second background image in #wrapper

3

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:


<!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.


<!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

Thanks to both,

Paul O’B that is very helpful.

Thanks