Используя background-repeat и background-position вместе

Question

Я пытаюсь реализовать макет faux column на веб-сайте. Вкратце, это включает в себя наложение фонового изображения на элемент div, который содержит оба вертикальных столбца, чтобы создать вид, что оба столбца простираются до самого дна.

Мои столбцы выглядят так:

XXXX   MMMM
XXXX   MMMM
XXXX
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY

С колонкой слева, которая идет вниз по всей странице, но с меню и прозрачностью и прочим ("M") вверху правой колонки. Я хочу, чтобы фон искусственного столбца начинался только тогда, когда начинается настоящий правый столбец ("Y"), и игнорировал все вышеизложенное из-за прозрачности между меню и Y-столбцом.

Чтобы сделать это, я планировал сместить фоновое изображение с помощью (background-position: 0px 200px), чтобы уменьшить изображение на 200 пикселей. Это не работает.

Я быстро понял, что изображение повторяется в обоих направлениях по вертикали. Вверх и вниз от этой исходной точки смещения. Это, очевидно, отменяет эффекты смещения. Но для работы искусственных столбцов необходим background-repeat-Y.

Как я могу использовать и background-repeat, и background-position вместе, чтобы получить нужный макет?

Спасибо!

ОБНОВЛЕНИЕ ДЛЯ УТОЧНЕНИЯ:

Вот мой макет:

альтернативный текст http://img38.imageshack.us/img38/3032/colorlayout.jpg

В идеале, зеленого не было бы, и я мог бы использовать изображение «оранжевый - прозрачный - розовый», чтобы создать искусственные столбцы для всех столбцов. Но если бы я сделал это сейчас, зеленое меню имело бы розовый фон из-за этого (кстати, действительно глупого) повторяющегося сбоя CSS. И я мог бы сделать прозрачный фон зеленого меню прозрачным png, но я не хочу, чтобы это повторялось по всей розовой колонке. Фон сайта является изображением, поэтому я не могу просто сделать так, чтобы у div зеленого меню был определенный цвет фона.

Кажется, ситуация проигрышная.

Answer 1

Я не знаю, как расположены ваши столбцы, но, возможно, было бы возможно использовать ваше основное фоновое изображение (фон сайта) в качестве фона для меню, которое теперь зеленое.

Или используйте абсолютно позиционированный div в z-index между вашим меню и правым столбцом, чтобы «перезаписать» ваш фиолетовый фон. Вы можете отцентрировать это и поместить его позади левой колонки, если ваша компоновка центрирована и первое решение невозможно.

Другим решением было бы использование javascript для установки высоты ваших двух основных столбцов, чтобы они проходили вниз, но я сначала попробую css ...

Answer 2

Насколько я вижу, у вас есть две возможности:

1. Придайте ММММ части правого столбца сплошной фоновый цвет. Затем он накладывается на поддельные столбцы

2. Установить фоновое изображение не для контейнера, а для столбцов YYYY и XXXX:

---

#XXXXcol {
  background: url(fake.png) repeat-y left top;
}

#YYYYcol {
  background: url(fake.png) repeat-y right top;
}

Обратите внимание на «правую» и «левую» части.

Answer 3

Вы можете разделить раздел XXXX на две части (фиксированный размер):

XXXX   MMMM
XXXX   MMMM
XXXX

А (вертикальное повторение XXXX ГГГГ):

XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
XXXX   YYYY
...

Чтобы правильно расположить фон, вы можете манипулировать контейнером (возможно, div), к которому применяется фоновое изображение.

Answer 4

Невозможно заставить фон начать повторяться с определенной позиции.

В вашем случае одним из решений будет использование искусственных столбцов на всей вашей странице (начиная с верха), а затем использование прозрачности PNG для вашего меню MMMM. Тогда вы можете изящно ухудшать свои позиции для IE и более старых браузеров.

Но я не уверен, что понимаю ваш вопрос очень хорошо.

Если проблема в том, что столбец ГГГГ не должен отображаться выше (где ММММ, например), тогда вы все равно можете использовать эту вещь из искусственного столбца, а затем обернуть ваше меню ММММ и все, что выше ГГГГ, в div с другой beackground. Таким образом, ваш faux-столбец будет скрыт над YYYY.

Снова трудно помочь, не видя фактического дизайна.

UPDATE:

Это кажется довольно трудным для достижения только с помощью CSS (я не уверен, что это даже возможно). Существует множество решений для выравнивания высот с использованием JavaScript. Смотри: http://spindrop.us/2007/05/22/equal-height-columns-with-jquery/

ОБНОВЛЕНИЕ 2:

На самом деле, если XXXX часть вашего сайта все время остается на одном и том же месте, вы можете подделать прозрачность и отобразить фоновое изображение, точно соответствующее той части фактического фона, которое оно скрывает. Я делал это много раз.

Answer 5

Я нашел альтернативу искусственным столбцам, которая работает в этом случае:

http://www.positioniseverything.net/articles/onetruelayout/equalheight

В основном:

#page {
    overflow: hidden

#orange, #pink {
    padding-bottom: 32767px;
    margin-bottom: -32767px;
}

Спасибо всем!