Можно ли заставить фоновое изображение повторяться по вертикали? Но также горизонтально только с правой стороны, используя CSS?

Question

Итак, в основном у нас есть фоновое изображение (красное), и мы хотим, чтобы оно повторялось с CSS следующим образом:

альтернативный текст http://img260.imageshack.us/img260/4417/repeat.png

Так что я не хочу, чтобы это повторялось с верхней и левой стороны.

(извините, я сосу у ASCII Art)

Answer 1

Если я вас правильно понимаю, вы хотите повторить только одну строку и один столбец изображения. Это можно сделать с помощью CSS3 Multiple Backgrounds .

В настоящее время это поддерживается только браузерами на основе WebKit и KHTML (Konqueror).

 body {
      background: url(myimage.png) top left repeat-x, 
                  url(myimage.png) top left repeat-y;
 }

Тем не менее, хотя я и не совсем понимаю, чего вы действительно хотите, я думаю, что вы должны использовать несколько div элементов, упорядоченных с помощью css, расположенных так, как вы хотите, и иметь разные фоны на каждом.

Редактировать: Видя вашу новую фотографию, кажется, что мой образец назад к тому, что вы хотите. Во всяком случае, мой совет остается в силе. Почему вы не используете два элемента div или margin-left для перемещения нужного элемента фона? Пересмотрите структуру вашего документа.

Answer 2

Я предполагаю, что вам нужны изображения в позициях 1, 2, 3, 4 и 7 (и т. Д.), Верно?

1 2 3
4 5 6
7 8 9

если так, такого правила CSS не существует; вам придется изменить свою разметку, чтобы разместить элементы там, где вы хотите фон. z-index и position:relative вам там пригодятся.

Answer 3

Нет, «повторяющиеся» указания идут в обе стороны: если вы повторяете вправо, то оно будет повторяться и влево. То же самое с вверх и вниз. Лучше всего обернуть фон в div соответствующего размера, но это зависит от ваших точных требований.

Answer 4

Конечно. Просто установите для свойства background-repeat значение repeat. Я уверен, что это значение по умолчанию.

См. здесь .