Кратко
СкопированоСвойство background задаёт элементу фоновую картинку.
Пример
Скопировано
div { background-image: url("фоновое-изображение.jpg");}
div {
background-image: url("фоновое-изображение.jpg");
}
Как пишется
Скопировано
div { background-image: url("адрес-картинки");}
div {
background-image: url("адрес-картинки");
}
Значения:
url— адрес картинки, он пишется в кавычках внутри скобок:url.( "cat _ box . png" ) none— сбрасывает фоновую картинку (значение по умолчанию).
Границы картинки и её расположение относительно краёв элемента мы задаём с помощью background и background.
Картинка плюс цвет
СкопированоЭлементу желательно задать одновременно и цвет фона background, и фоновую картинку. Если картинка не загрузится, то вместо неё пользователь увидит фоновый цвет.
body { background-image: url("background.png"); background-color: #09ff00;}
body {
background-image: url("background.png");
background-color: #09ff00;
}
Несколько фоновых картинок
СкопированоФоновых картинок можно задать сколько угодно. Они будут накладываться друг на друга, причём сверху будет та, которая указана в списке первой. Если у картинки прозрачный фон, то под ней будет видна следующая. И так до бесконечности.
body { background-image: url("confetti.png"), url("landscape.jpg"); background-color: gray;}
body {
background-image: url("confetti.png"), url("landscape.jpg");
background-color: gray;
}
Если у первой картинки фон не прозрачный, то следующая по счёту картинка будет видна только в случае, если первая не загрузилась.
Градиент на фоне
СкопированоС помощью background также можно сделать градиентный фон. Например, так:
div { background-image: linear-gradient(red, yellow, green);}
div {
background-image: linear-gradient(red, yellow, green);
}
Подробнее о градиентах можно прочитать в статьях о linear, radial и conic.
Подсказки
Скопировано💡 Разные браузеры могут отображать фоновую картинку по-разному. Например, если вы задаёте фоновую картинку внутри таблицы для одной строки целиком, то Chrome и Safari продублируют эту картинку в каждой ячейке, тогда как остальные растянут картинку на всю строку.
На практике
Скопированосоветует
Скопировано🛠 Стоит понимать разницу между <div> с фоновой картинкой и, собственно, картинкой <img>. Картинке можно задать только один параметр размера: высоту или ширину, и браузер сам рассчитает второй. У блока с фоном, внутри которого нет контента, надо указывать оба параметра.
Так происходит потому, что по умолчанию <div> имеет ширину 100% и нулевую высоту, если у него нет содержимого. Поэтому фоновая картинка будет не видна.
Чтобы это исправить, нужно добавить элементу необходимые ширину и высоту. А ещё не забыть про background и background, чтобы фон выглядел отлично.
советует
Скопировано🛠 Если задаём фоновую картинку для блока со светлым текстом, то обязательно задаём и фоновый цвет.
Почему это важно: если при загрузке страницы картинка будет долго загружаться или вообще не загрузится, то светлый текст на белом будет совершенно не виден. Пользователь потеряет контекст и, вероятнее всего, интерес к вашей странице.
Пример ниже не пустой, но в нём не загрузилась фоновая картинка:
<div> <h1>Фронтенд-блог: чиним вёрстку одной строкой</h1></div>
<div>
<h1>Фронтенд-блог: чиним вёрстку одной строкой</h1>
</div>
div { background-image: url("broken-link-to-image.png");}h1 { color: white;}
div {
background-image: url("broken-link-to-image.png");
}
h1 {
color: white;
}
Чиним одной строкой:
.element { background-image: url("broken-link-to-image.png"); background-color: #18191C;}
.element {
background-image: url("broken-link-to-image.png");
background-color: #18191C;
}
Да, будет не так красиво, как нарисовал дизайнер, но вся информация будет доступна.
🛠 Кроме линейного градиента можно задавать радиальный — круглый — градиент. Для этого нужно написать следующее:
<div class="spread-gradient"></div><div class="smooth-circle"></div><div class="sharp-circle"></div>
<div class="spread-gradient"></div>
<div class="smooth-circle"></div>
<div class="sharp-circle"></div>
.spread-gradient,.smooth-circle,.sharp-circle { width: 200px; height: 200px;}.spread-gradient { background-image: radial-gradient(#e6e6e6, #1a5ad7);}.smooth-circle { background-image: radial-gradient(#e6e6e6, #1a5ad7 70%);}.sharp-circle { background-image: radial-gradient(#e6e6e6 70%, #1a5ad7 70%);}
.spread-gradient,
.smooth-circle,
.sharp-circle {
width: 200px;
height: 200px;
}
.spread-gradient {
background-image: radial-gradient(#e6e6e6, #1a5ad7);
}
.smooth-circle {
background-image: radial-gradient(#e6e6e6, #1a5ad7 70%);
}
.sharp-circle {
background-image: radial-gradient(#e6e6e6 70%, #1a5ad7 70%);
}