Кратко
СкопированоСвойство 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 class="element"> <h1 class="main-title">Фронтенд-блог: чиним вёрстку одной строкой</h1></div>
<div class="element"> <h1 class="main-title">Фронтенд-блог: чиним вёрстку одной строкой</h1> </div>
.element { display: flex; justify-content: center; align-items: center; background-image: url("broken-link-to-image.png");}.main-title { width: 80%; margin: 0 auto; color: white; text-align: center; text-transform: uppercase; font-family: sans-serif; font-size: 3rem;}
.element { display: flex; justify-content: center; align-items: center; background-image: url("broken-link-to-image.png"); } .main-title { width: 80%; margin: 0 auto; color: white; text-align: center; text-transform: uppercase; font-family: sans-serif; font-size: 3rem; }
Демка будет наглядной, если на сайте включить светлую тему ☀️
Чиним одной строкой:
.element { display: flex; justify-content: center; align-items: center; background-image: url("broken-link-to-image.png"); background-color: gray;}
.element { display: flex; justify-content: center; align-items: center; background-image: url("broken-link-to-image.png"); background-color: gray; }
Да, будет не так красиво, как нарисовал дизайнер, но вся информация будет доступна.
🛠 Кроме линейного градиента можно задавать радиальный — круглый — градиент. Для этого нужно написать следующее:
<div class="parent"> <div class="spread-gradient"></div> <div class="smooth-circle"></div> <div class="sharp-circle"></div></div>
<div class="parent"> <div class="spread-gradient"></div> <div class="smooth-circle"></div> <div class="sharp-circle"></div> </div>
.parent { display: flex; justify-content: space-around; padding: 5%; background-color: #1a5ad7;}.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%);}
.parent { display: flex; justify-content: space-around; padding: 5%; background-color: #1a5ad7; } .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%); }