Repeat background image: background-repeat — CSS: Cascading Style Sheets

Как повторить фоновое изображение по вертикали и горизонтали с помощью CSS?

Улучшить статью

Сохранить статью

• Последнее обновление: 21 июн, 2022

Читать

Обсудить

Улучшить статью

Сохранить статью

В этой статье мы обсудим свойство CSS повторения фонового изображения. Также мы собираемся обсудить, как повторить фоновое изображение в горизонтальном и вертикальном направлениях.

Свойство background-repeat в CSS используется для повторения фонового изображения как по горизонтали, так и по вертикали. Он также решает, будет ли фоновое изображение повторяться или нет.

Background-repeat: Это свойство используется для повторения фонового изображения как по горизонтали, так и по вертикали. Последнее изображение будет обрезано, если оно не помещается в окне браузера.

Синтаксис:

 background-repeat: повтор|повтор-x|повтор-y|
не повторять | начальный | наследовать; 

Пример 1:

Повторим изображение по горизонтали. Здесь мы собираемся использовать то же свойство, которое мы использовали ранее.

Свойство repeat-x используется для повторения фонового изображения по горизонтали.

Синтаксис:

 элемент {
  фоновый повтор: повтор-х;
} 

Мы также определяем размер фонового изображения с помощью свойства background-size.

HTML

< html lang = "en" > < head >      < meta charset = "UTF-8" > < Meta HTTP-EQUIV = "X-UA-Compatible" COTTOMENT "x-UA-COMPATIBLE" CONTTOM " " X-UA. 0058 "IE = Edge" > < Meta Имя = "Viewport" ". Начальная масштаба = 1,0 " > < Стиль > КОЛИТЕ { .0058              размер фона: 150 пикселей;              background-repeat: Repeat-x;          }      style > head > < body >        Body > HTML >

Выход: Как вы можете увидеть на выходе.

 

Пример 2: Теперь давайте повторим изображение по вертикали. Свойство repeat-y используется для установки повторения фонового изображения только по вертикали.

HTML

< html lang = "en" > < head >      < meta charset = "UTF-8" > < Meta HTTP-EQUIV = "X-UA-Compatible" COTTOMENT "x-UA-COMPATIBLE" CONTTOM " " X-UA. 0058 "IE = Edge" > < Meta Имя = "Viewport" ". Начальная масштаба = 1,0 " > < Стиль > КОЛИТЕ { .0058              размер фона: 150 пикселей;              background-repeat: Repeat-y;          }      style > head > < body >        body > html >

9000 Вывод: повторяется.