Добавить фоновые "бары", чтобы расширить изображение заголовка с цветом. или поместите изображение на панели Div

Question

Я в основном сделал заголовок для своего сайта, и на его сторонах есть черный цвет. Я хочу расширить заголовок, чтобы он соответствовал ширине веб-браузера пользователя с черными "полосами", как если бы заголовок расширялся на весь браузер.

Я попробовал несколько вещей, но я не могу понять это.

Вот пример того, что я имею сейчас:

#header {
    background: url('img/header.png') no-repeat top center;
    height: 131px;
    }

#headerbg {
    height: 131px;
    width:4000px;
    background-color:#000;
}

И в html я просто в div и внутри друг друга в html.

Answer 1

Вот jsFiddle, который показывает вам, как наложить два div и использовать background-size свойство развернуть изображение, чтобы оно соответствовало ширине цвета фона. ОБНОВЛЕНИЕ: новый jsFiddle выше заменен, чтобы включить лучший метод для этого типа вида.

Редактировать: Вот другой jsFiddle, который помещает изображение внутрь и центрирует его, позволяя пролить любой лишний цвет фона из родительского контейнера.

Редактировать 2: Используя редактируемую выше скрипку, вы можете применить эффект градиента CSS3/IE, как показано в этом jsFiddle

Статус: решение было использовать center center за background-position в сочетании с настройкой обоих width and height в 100% для изображения используется.