Question

Ok, so I have a section in a page (wordpress)

<header id="masthead" role="banner">
    <div id="header_fix"></div>
</header>

and the css

#masthead {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-repeat:no-repeat;
    background-size:cover;
    padding: 70px 0;
} 
#header_fix {
    margin: 0 auto;
    width: 1355px;
    height: 164px;  
    text-align: center;
    background-image:url(images/Banner_SF.png);
    /*background-size: contain;*/
}

I want to have the header_fix div overflow the parent header (the head_fix fiv image is a really long banner, like 1800px), and always aligns the center of the div (and therefore the center of bg-image) to the center of the window.

    ______________________________________
    |    masthead always window width     |
____|_____________________________________|___
|   |     header_fix always centered      |   |
|___|_____________________________________|___|
    |                                     |
    |_____________________________________|

tried variety of things… is it something to do with parent-child relationship? like is header just not treated like a div, or at least needs display:block; or something? any help appreciated.

Answer 1

You don’t need the extra element. You can just use background-position to center your background image. It will already be the same size as the source image.

Here it is in shorthand:

#masthead {
    width: 100%;
    margin: auto;
    background: url(images/Banner_SF.png) no-repeat center top;
}

To answer your other questions: No, the <header> element is not rendered differently from a normal <div> element, other than it not being supported in some browsers. It is still a block-level element by default.