Повтаряне на фон

Описание на урока

Контрол върху повтарянето на фоновото изображение

По подразбиране браузърът повтаря фоновото изображение, докато запълни целия контейнер. Това невинаги е желан ефект. Чрез свойството background-repeat можете да определите дали изображението да не се повтаря изобщо или да се повтаря само по хоризонтала или вертикала. Най-важното е да запомните, че именно background-repeat ви дава пълен контрол върху начина, по който фонът се разполага в елемента.

Стъпка по стъпка: как да управлявате повторението

1. Добавете фоново изображение към елемент чрез background или background-image.
2. По подразбиране изображението ще се повтаря, докато запълни контейнера.
3. За да спрете повторението, добавете:

background-repeat: no-repeat;

1. За повторение само по хоризонтала използвайте:

background-repeat: repeat-x;

1. За повторение само по вертикала използвайте:

background-repeat: repeat-y;

1. Можете да запишете всичко и на един ред чрез съкратения запис:

background: red url("image.png") no-repeat;

Използвани CSS свойства

• background-repeat – Определя дали и как да се повтаря фоновото изображение (no-repeat, repeat-x, repeat-y).
• background – Съкратен запис за задаване на цвят, изображение и допълнителни настройки в един ред.
• background-image – Задава изображение за фон чрез url().

Този контрол е особено полезен при създаване на елементи като статус ленти, прогрес барове или декоративни секции.