background-repeat

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

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

Что такое background-repeat + синтаксис
Пример background-repeat repeat-x
Пример repeat-x с картинкой(трава)
Пример 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... теперь перейдем к жизни... wall смайлы

Вчера я разбирал 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)

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

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

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

И добавим "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

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

В данном пример "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" этого достаточно...

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

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