Question

I am trying to create a header for a website. What I am trying to do is repeat a background image all the way across my page for the header background. This image is 1px wide. On top of that image I want to center another background image on top of the previous and have it centered and no repeating. The second image is the logo of the site and the title etc.

With the below code I get the top layer not centered and repeating with the bottom layer.

.mainHeaderBottomLayer
{
    background-image: url("images/header.png");
    background-repeat: repeat-x;
    height: 107px;
    text-align: center;
}
.mainHeaderTopLayer
{
    background-image: url("images/headerLayer.png");
    background-repeat: no-repeat;
    width: 1200px;
    margin: 0 auto;
}

Here is the html

<div class="mainHeaderBottomLayer">
    <div class="mainHeaderTopLayer"></div>
</div>

Anyone know how this can be done?

Answer 1

background: url(“images/headerLayer.png”) no-repeat center top #fff;
or
background: url(“images/headerLayer.png”) no-repeat 50% 0 white;