Заставить фоновый цвет повторять только по горизонтали, используя CSS

Question

Я указываю цветной шестнадцатеричный код как background-color очень длинного div. Тем не менее, я бы хотел, чтобы этот цвет повторялся только по горизонтали, слева направо, в первой части и больше не опускался.

Можно ли это сделать с помощью background-repeat:repeat-y или есть другой метод?

Answer 1

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

div.className {
  background-image:url("images/background.jpg");
  background-position:left top;
  background-repeat:repeat-x; // Causes repeat from left-to-right only
}

Answer 2

Вы имеете в виду повторение цвета фона или изображения? Я предполагаю, что изображение, повторяющее цвет фона, не имеет смысла. И да, это правильный путь:

#mydiv {
  background-image: url(images/background.png);
  background-repeat: repeat-x;
}

Answer 3

Свойство background-repeat CSS определяет способ повторения фоновых изображений. Фоновое изображение может повторяться вдоль горизонтальной оси, вертикальной оси, или не повторяться вообще. Когда повторение плиток изображения не позволяет им точно покрыть фон, способ выполнения корректировок может контролироваться автором: по умолчанию последнее изображение обрезается, но вместо этого можно изменить размер различных плиток или Между плитками можно вставить пробел.

http://www.handycss.com/how/how-to-repeat-a-background-image-horizontally-with-css/

Answer 4

Этого можно добиться без файла при создании изображения размером 1 пиксель и его вставке в код CSS, закодированный как base64, или с помощью нескольких элементов HTML и позиционирования. Вы не можете указать размер фона для простого цвета, определенного в чистом CSS (без использования трюка с изображением).

Также см. Является ли встраивание данных фонового изображения в CSS как Base64 - хорошая или плохая практика?