Лучший способ разместить фон из двух частей в CSS?

Question

У меня странный фон, я пытаюсь найти лучший способ его стилизовать.

Итак, фоновое изображение состоит из двух частей: верхняя часть имеет уникальный горизонтальный и вертикальный дизайн (примерно 1024x700), а затем нижняя часть, которая имеет уникальный стиль по горизонтали, но может повторяться по вертикали. (1024 х 1)

Прямо сейчас у меня есть верхний раздел, являющийся фоновым изображением для заголовка, проблема в том, что он портит мне стилизацию всего содержимого страницы, потому что он такой большой!

Каков наилучший способ кодирования фона из двух частей, подобного этому, в HTML и CSS?

Страница выложена так:

контейнер div

-> заголовок div

-> div content

нижний колонтитул div

Конечно, я могу это изменить ...

Спасибо!

Кевин

Answer 1

Если я вас хорошо понял, это может быть решением:

1. для нижней части, просто сделайте это с повторением x вашего 1px изображения, примененного к фону тела

2. для верхней секции, у вашего основного контейнера div есть следующий стиль:

ширина: 100%; background: url ('your-image.jpg') center;

примечание: непроверенный

Answer 2

Что ж, остановка в нижнем колонтитуле - самая сложная часть. Обычно для такого типа вещей я бы делал что-то вроде:

html {background: SOMECOLOR url(path/to/y/repeater.jpg) repeat-y scroll top center;}
body {background: transparent url(path/to/static.jpg) no-repeat scroll top center;}

Answer 3

Fiddle с позиционированием и z-index .