Повтор картинки по горизонтали/вертикали background-repeat.

"background-repeat" - что такое? "background-repeat" - это свойство, которое отвечает за повтор(по горизонтали, по вертикали) для "background-image". Разберем синтаксис с примерами!

Подробно о "background-repeat"

1. Что такое background-repeat + синтаксис
2. Пример background-repeat repeat-x
3. Пример repeat-x с картинкой(трава)
4. Пример background-repeat repeat-y

Что такое background-repeat + синтаксис

Как уже выше было сказано : "Что такое background-repeat" :

background-repeat - это повторение "background-image" по вертикали и горизонтали

В интернете вы сможете найти разный синтаксис background-repeat!

Синтаксис background-repeat(CSS2.1):

background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit

Синтаксис background-repeat(CSS3):

background-repeat: <повторение> [ , <повторение> ]¹
Повторение
<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

Значения синтаксиса background-repeat:

no-repeat

Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.

repeat

Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.

repeat-x

Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.

repeat-y

Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.

inherit

Наследует значение родителя.

space

Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.

round

Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.



Пример background-repeat no-repeat

Надеюсь, что вы что-то да поняли в синтаксисе background-repeat... теперь перейдем к жизни...

Вчера я разбирал background_image... возьмем оттуда пример :

Добавим в стили border - он нам пригодится

border: 1px solid red;

Html:

<div class=example></div>

Css:

<style>

.example {

background-image: url(https://dwweb.ru/__img/__dates/logo.png);

height: 200px;

border: 1px solid red;

}

</style>

Результат :

Как видим... у нас картинка повторяется! Нам нужно добавить no-repeat, чтобы картинка была только одна!

Добавляем к стилям:

background-repeat: no-repeat;



Пример background-repeat repeat-x

После того, как мы разобрались с "no-repeat" перейдем к background-repeat : repeat-x - повторение по горизонтали.

Возьмем выше приведенный код и добавим туда:

background-repeat: repeat-x;

Html:

<div class=example></div>

Css:

<style>

.example {

background-image: url(https://dwweb.ru/__img/__dates/logo.png);

height: 200px;

background-repeat: repeat-x;

border: 1px solid red;

}

</style>

Вывод примера background-repeat : repeat-x

Вы получите вот такое повторение картинки по горизонтали.

Естественно :

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




Пример background-repeat : repeat-x с картинкой

Давайте сделаем пример с повторяющимся задним фоном в виде травы... нам потребуется :

Нам потребуется какой-то блок - пусть это будет div

Добавим нашему каркасу произвольно названный класс(class)

<div class="background_repeat_y_grass"></div>

Нам нужна картинка травы...



И в выше приведенном коде изменим адрес.

И добавим "background-position"

background-position: bottom;

Код повторяющегося фона по горизонтали

Html :

<div class="background_repeat_y_grass"></div>

Css :

<style>

.background_repeat_y_grass{

background-image: url(https://dwweb.ru/__new_img/background/001_background_repeat.png);

height: 200px;

border: 1px solid red;

background-repeat: repeat-x;

background-position: bottom;

}

</style>

Пример повторяющегося фона по горизонтали

Как видим... довольно симпатично получается...




Пример background-repeat repeat-y

Следующим пунктом разберем background-repeat: repeat-y - повтор картинки по вертикали... на первом примере останавливаться не буду...

В самом первом коде добавил:

background-repeat: repeat-y

И схематичны пример потвора по вертикали картинки:




Как этот background-repeat: repeat-y применяется на сайте? Ну например... где то на сайте вам нужно поставить переходящую из темного в светлый фон линию...

Пример повторяющегося фона по вертикали

Для следующего примера повторяющегося фона по вертикали нам потребуется:

Опять какой-то из элементов "Дома" пусть это будет "div"

Добавим ему произвольный class

<div class="background_repeat_y"></div>

Далее нам потребуется картинка... с переходящим цветом от синего к белому:



В данном пример "background-position" не потребуется, поскольку картинка по умолчанию располагается слева...

Код повторяющегося фона по вертикали

Html:

<div class="background_repeat_y"></div>

Css :

<style>

.background_repeat_y{

background-image: url(https://dwweb.ru/__new_img/background/002_background_repeat.png);

height: 300px;

border: 1px solid red;

background-repeat: repeat-y;

}

</style>

Пример вывода повторяющегося фона по вертикали

Ну... думаю, что для понимания работы "background-repeat" этого достаточно...

А если нет, то вы всегда сможете найти соответствующую информацию в интернете...