Безплатно! Онлайн събитие: От претоварване с информация до фокус и структура с Gemini & NotebookLM Регистрация тук.

Изображение като фон

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

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

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

Най-важното за фонoвите изображения в CSS

Изображение може да се добави като фон на елемент чрез CSS, без да се използва <img> таг. Това става с background-image, като браузърът повтаря картинката автоматично, ако тя е по-малка от елемента. Можем да комбинираме цвят и изображение в едно общо свойство background. Важно е да зададем правилен релативен път до файла.

Стъпка по стъпка: как да добавите изображение като фон

Изберете елемент, например h1, в CSS файла.
Добавете фонов цвят:
background-color: red;
Добавете изображение:
background-image: url("../images/icon.png");
Обърнете внимание на ../ – това означава „една папка нагоре“, защото CSS файлът е в различна директория.
Запазете файла – ако изображението е малко, ще се повтори автоматично, за да запълни целия елемент.
За по-кратък запис комбинирайте двете свойства:
background: red url("../images/icon.png");

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

background-color – задава фонов цвят на елемента.
background-image – добавя изображение като фон чрез url().
background – съкратено (shorthand) свойство, което комбинира цвят и изображение в един ред.
url() – указва пътя до файла (може да бъде релативен или абсолютен).

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

Въпроси

Отговори

Николай Ушанов

Защо са стари кодовете?

Злат Попзлатев

Защо няма промяна в цвета на фона?