Прескочи към основното съдържание Прескочи към навигацията
Допълнения към урока
Учебна програма HTML5 и CSS3
HTML5 и CSS3
4. Фонови изображения и спрайтове

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

Курсове HTML5 и CSS3 Седмица 4 - Фонови изображения и спрайтове
-51,13 € за ВЕЛИКДЕН: Вземи курс "HTML5 и CSS3" за    127,31 € 76,18 €  ВИЖ ТУК

Пълен достъп до курса: Не

За пълен достъп или безплатна проба (2 модула), моля влезте или се регистрирайте.

Предишен Следващ

HTML5 и CSS3 В курса ще се научите как да създавате съвременни уеб страници с помощта на HTML и CSS. Това обучение е подходящо за напълно начинаещи и ще ви помогне да усвоите основите на уеб разработката, като научите как да създавате структура и стил на уеб страници.

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

По подразбиране браузърът повтаря фоновото изображение, докато запълни целия контейнер. Това невинаги е желан ефект. Чрез свойството 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().

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

Дискусия към урока