CSS: Centering a background image on top of a repeating background image

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?

Solution 1

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

Solution 2

.mainHeaderTopLayer {
background: url(images/headerLayer.png) no-repeat center top;
width: 1200px;
height: 200px;
margin: 0 auto; }

Just center the image via the background property and position attributes.

Based on comments above you need a height attribute as well....

Comments

[Jared Sol]

Thank worked however I am still getting the repeated background for the mainHeaderTopLayer

[Ricardo Castañeda]

background: url("images/headerLayer.png") no-repeat center top white

[Jared Sol]

.mainHeader { background: url("images/header.png") repeat-x center top; height: 107px; } .mainHeaderLayer { background: url("images/headerLayer.png") no-repeat center top; width: 1200px; margin: 0 auto; }

[Ricardo Castañeda]

Try adding some color to the background, in my previous posts it's an example.

[Jared Sol]

Color didn't help. It's as if the child div is inheriting the repeat from the parent. However in firebugs it is showing the child as no-repeat.

[Ricardo Castañeda]

Try jsfiddle.net to test online your code. It will make it easier to solve any future question.