How to stretch a header across a web page background with CSS_问答_开发者

http://www.stumbleupon.com/

http://www.mixx.com/

Both of these websites have a background header stretched across the page while the content is centered and is covering like say 80% of the width, and that also perfectly aligns with the rest of the layout.

I am particularly interested in these two sites, because the header has two b开发者_运维技巧ackground colors, not just one.

I am sure there are tons of tutorials on the web, but I do not the keywords to search for.

Analyzing stumbleupon.com:

The "header" consists actually of two divs: wrapperHeader and wrapperNav. Those two have different background colors. These divs have only one child each that has the CSS property

margin: 0 auto

This results in a horizontal centering.

This property is assigned to the content div too, so the header, navigation and content are always centered. Of course this requires to set some width for this elements.

The structure looks like this:

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

If you get Firebug for Firefox, you can easily analyze the elements yourself.

it is background-image set to body with property background-repeat:

background-repeat: repeat-x;

more: http://www.w3schools.com/css/pr_background-repeat.asp

Edit: As for centering your content—I do it this way:

<body>
<div id="wrapper">
  <!-- here is wrapper *everything* else -->
</div>
</body>

then set width of wrapper to value (mostly 960px). Then, when you set it's margin to 0 auto, it centers itself.

#wrapper{
  margin: 0 auto;
}

Adding background images has 2 drawbacks:

Every time you want to change the color of your header you have to open your Photoshop and change the color there and then change it again in your CSS.
Now you want the background color of the header to stretch across the page but what if you want to do that with the footer too?

The easiest solution is this one:

(you not only create a an easy way to stretch the color across the page, being able to use different color in all header content and footer, but also it saves yourself from the double margin problem of IE (when you use width and margin in the same elements).

index.html:

   <html> 
    <body id="body"> 
    <div id="header"> 
        <div class="container"> 
            <!-- header's content here -->
        </div><!-- .container --> 
    </div><!-- #header --> 
    <div id="content"> 
        <div class="container"> 
            <!-- main content here -->
    <div id="footer"> 
        <div class="container"> 
            <!-- footer's content here -->
        </div><!-- .container --> 
    </div><!-- #footer --> 
    </body> 
    </html>

style.css:

.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    width: 960px;
}

#header {
    background: #EEE;
}

#content {
    background-color: #F9F9F9;
}

#footer {
    background-color: #333;
    color: #BBB;
    clear: both;
}

In this example, the div.container centers the elements and also gives them a width, and the background color can stretch across the page because #header, #content and #footer don't have width. And in the future just apply margin and padding to divs inside .container, and you'll save lots of problems with IE in the future.

I beg to differ, there is an easy way to do this. Compatible with both Google Chrome and Firefox, IE not tested.

In your CSS file:

body{
    overflow-x:hidden;
}

div#headerbg{
    width:110%;
    margin-left:-20px;
    background-color:black;
}

and now simply use it in your HTML file. You can add positioning and what-not to this.

You can use a background image 1px width with set background repetition in horizontal.

background-image:url('paper.gif');
background-repeat:repeat-x;

And then align your content, which way you like.

This is just a fixed-width layout, but with automatic left and right margins. The effect of this is to centre the whole of the content block if the page size is wider than the content width.

the background is just set as a repeating image (repeat-x) to make it look like the menu element actually extends the full width of the page.

I think you're talking about the 100%/80% width differential ....

This should help you get started:

<div id="header" style="width:100%; margin: 0px;">
   <!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
   <!-- content -->
</div>

The margin: auto on the content makes the block centred.

Liike Adam says, add the background-repeat to give it the graphically pleasing element.

With CSS 2, you can't stretch a background image. There is no property for setting background image dimensions. You can just repeat it on X, Y or both axis.

CSS 3 will allow that stretching.

Very simple without a whole bunch of hoopla.

Paste this in between - body - and - div container - you can have whatever else you want in there as well but on my page it's like this: (I tried to get it to wrap, no go, just copy and paste.)

<body>

<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;  top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg"  id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%;   height:5px;">

<map name="ImageMapImageMap0">
</map>
</div>

<div container>

Then change the info you need for top:px height:_px img src="yourfile/yourimg.jpg and IMPORTANT don't forget the next height:__px

No anything else needed anywhere. Try it.