CSS: центрирование фонового изображения поверх повторяющегося фонового изображения

Question

Я пытаюсь создать заголовок для сайта. То, что я пытаюсь сделать, это повторить фоновое изображение по всей странице для фона заголовка. Это изображение шириной 1px. Поверх этого изображения я хочу расположить другое фоновое изображение поверх предыдущего, отцентрировать его и не повторять. Второе изображение - логотип сайта, заголовок и т. Д.

С помощью приведенного ниже кода я получаю верхний слой не по центру и повторяюсь с нижним слоем.

.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;
}

Вот HTML

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

Кто-нибудь знает, как это можно сделать?

Answer 1

background: url ("images / headerLayer.png") без повтора центра сверху #fff;
или
background: url ("images / headerLayer.png") без повтора 50% 0 белый;

Answer 2

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

Просто отцентрируйте изображение с помощью свойства фона и атрибутов позиции.

Основываясь на комментариях выше, вам также необходим атрибут высоты ....

Answer 3

Используйте фоновое позиционирование для выравнивания логотипа:

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