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

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

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

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

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

Страница оформлена так:

контейнер div

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

-> содержимое div

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

Я, конечно, могу это изменить ...

Спасибо!

Кевин


html layout css position positioning
person Kevin Z    schedule 30.12.2010    source источник
comment
Как выглядит HTML?   -  person Damien Wilson    schedule 30.12.2010

Ответы (3)


arrow_upward
2
arrow_downward

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

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

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

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

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

person CodeVirtuoso    schedule 30.12.2010
comment
Фрилансер - пока звучит неплохо. Мне бы очень хотелось, чтобы нижняя часть повторялась только тогда, когда это необходимо, и мне нужно, чтобы она останавливалась на нижнем колонтитуле. Любые предложения о том, к какому div я должен это прикрепить? Мне нужно, чтобы он был таким же длинным, как и дополнительный контент в div контента. Просто к вашему сведению - у меня есть #container ›#content. - person Kevin Z; 30.12.2010
comment
Хм .. как насчет того, чтобы установить высокий z-индекс нижнего колонтитула? как z-index: 1000; так что он находится над другими элементами на странице, включая нижний div - person CodeVirtuoso; 30.12.2010

arrow_upward
1
arrow_downward

Поиграйте с позиционированием и z-index.

person Andrew    schedule 30.12.2010

arrow_upward
1
arrow_downward

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

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;}
person prodigitalson    schedule 30.12.2010
comment
Да, это было бы легко. Вот для чего я иду ко всем вам ... потому что это меня поставило в тупик! ;) - person Kevin Z; 30.12.2010