Расположение нескольких фоновых изображений

Ответ 1

Ваша проблема в том, что repeat-y будет заполнять всю высоту, независимо от того, где вы ее позиционируете на начальном этапе. Таким образом, он перекрывает верх и низ.

Одним из решений является толкание повторяющегося фона в псевдоэлемент, расположенный за пределами контейнера с помощью 12px сверху и снизу. Результат можно увидеть здесь (непрозрачность в демонстрации только для того, чтобы показать, что перекрытия не происходит). Без прозрачности см. Здесь. Соответствующий код (проверенный в браузерах CSS3: IE9, FF, Chrome):

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

Если вам нужна или нужна поддержка IE8 (которая не поддерживает несколько фонов), вы можете поместить верхний фон в главный div и поместить нижний фон с помощью псевдоэлемента div:after, расположенного в нижней части контейнер.

Ответ 2

Если вы можете добавить дополнение/рамки к блоку, равному фону, который вы хотите разместить без перекрытия другого блока, вы можете использовать background-clip и background-origin, чтобы расположить верхний и нижний фоны над областями/границами, и повторяющийся фон над содержимым /paddings + content.

Вот пример: http://dabblet.com/gist/2668803

Для вашего кода вам, возможно, потребуется добавить что-то вроде этого:

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;

или

border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;

И вы получите то, что вам нужно. Если вы не можете получить paddings/border, псевдоэлемент, такой как ScottS, будет работать отлично.

Ответ 3

Попробуйте сделать это следующим образом:

 background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
    }

EDIT: Это был просто пример, но здесь css с вашим css:

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
        }

Ответ 4

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

Вместо добавления кода, как и другие ответы, вам просто нужно перечислить его по-разному в своем CSS. Центральное изображение, которое повторяется, должно быть указано последним, а не первым или вторым.

В моем коде это выглядит так:

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;

Ответ 5

Здесь используется метод, который использует 3 div для каждого из Верх, Среднее и Снимок, которые прозрачны для применения к вашей веб-странице..

Фоновые обои не являются обязательными.

Протестировано в современных браузерах и поддерживает IE8.

Этот метод позволяет обрабатывать элемент body, так как его следует обрабатывать, т.е. разметка вашей веб-страницы не должна быть в оболочке или содержащем элемент.

Пример jsFiddle

jsFiddle Пример с центрированным заполнением

Так как в приведенном выше примере используется контент владельца места для изображений, который не имеет прозрачности для изображений Top и Bottom, вы можете проверить, что разметка работает с прозрачностью с помощью этого jsFiddle, который использует мини-прозрачные значки в режиме повтора ЗДЕСЬ.

Ответ 6

Единственный (практический, не угрожающий волосам) способ, который я вижу, - это сделать это в Javascript, когда страница загрузилась, и когда она будет изменена, с размером холста, соответствующим размеру внутреннего и трех изображений: нарисуйте сначала один раз наверху, нарисуйте второй столько раз, сколько потребуется, чтобы покрыть оставшуюся часть холста, и нарисуйте третий в нижней части холста. Поместите холст на 0,0 с смехотворно отрицательным z-индексом.

У меня было 3 изображения (643 x 12, 100 и 12), и, конечно, первая проблема, которую я видел, это то, что третье изображение рисуется над частью последней итерации второго изображения - если только вы имеют высоту окна ровно 12 + 12 + (p2.height * X), ​​у вас будет некоторое перекрытие. Но что ожидалось, правильно?

Ответ 7

Я думаю, что z-index исправит это, потому что z-index влияет только на элементы CHILD, то есть вы не можете испортить что-либо еще на странице, которая использует z-index.

верхние и нижние изображения z-index:3;

среднее изображение z-index:2; background-repeat:repeat-y;

Ответ 8

Радикальный, но эффективный способ справиться с этим, если:

1. Вы хотите применить фон без наложения на ": before"
2. элемент ": before" как известная максимальная высота

&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}

Ответ 9

чтобы использовать backgroud-position с 2 аргументами, необходимо писать в расширенном написании backgroud-position-x и backgroud-position-y

background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;