- background-image
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- background — image
- Кратко
- Пример
- Как пишется
- Картинка плюс цвет
- Несколько фоновых картинок
- Градиент на фоне
- Подсказки
- На практике
- Егор Левченко советует
- Алёна Батицкая советует
- Как добавить изображение фоном. Свойство background-image
- Значения
- Повторное изображение
- Размер изображения
- Наследование
- Примеры использования
- Нюансы использования
- Материалы по теме
background-image
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.
Синтаксис
background-image: url(путь к файлу) | none | inherit
background-image: url(путь к файлу) | none[, url(путь к файлу) | none]*
Значения
url В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. none Отменяет фоновое изображение для элемента. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
Объектная модель
[window.]document.getElementById(» elementID «).style.backgroundImageБраузеры
Internet Explorer до версии 7.0 включительно применяет фон к внутренней части границы элемента, у которого установлено свойство hasLayout . Если у элемента нет hasLayout , свойство background-image будет учитывать границы элемента, как это и задано в спецификации. Разница в отображении будет заметна, если границы пунктирные ( dashed или dotted ), а не сплошные.
Если для элемента значение overflow установлено как scroll или auto , в Internet Explorer 8 будет вертикальная задержка в один пиксел при прокрутке фона.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
HTML5 CSS2.1 IE Cr Op Sa Fx
1 2 3
Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).
Рис. 1. Повторение фона для каждой ячейки
Рис. 2. Фон для всей строки
background — image
Полезное свойство, если нужно поставить на фон картинку или задать декоративное изображение. Можно даже градиент!
Время чтения: меньше 5 мин
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство background — image задаёт элементу фоновую картинку.
Пример
Скопировать ссылку «Пример» Скопировано
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 — clip и background — origin .
Картинка плюс цвет
Скопировать ссылку «Картинка плюс цвет» Скопировано
Элементу желательно задать одновременно и цвет фона background — color , и фоновую картинку. Если картинка не загрузится, то вместо неё пользователь увидит фоновый цвет.
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 — image также можно сделать градиентный фон. Например, так:
div background-image: linear-gradient(red, yellow, green);>
div background-image: linear-gradient(red, yellow, green); >
Подробнее о градиентах можно прочитать в статьях о linear — gradient , radial — gradient и conic — gradient ( ) .
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Разные браузеры могут отображать фоновую картинку по-разному. Например, если вы задаёте фоновую картинку внутри таблицы для одной строки целиком, то Chrome и Safari продублируют эту картинку в каждой ячейке, тогда как остальные растянут картинку на всю строку.
На практике
Скопировать ссылку «На практике» Скопировано
Егор Левченко советует
Скопировать ссылку «Егор Левченко советует» Скопировано
Чтобы это исправить, нужно добавить элементу необходимые ширину и высоту. А ещё не забыть про background — repeat и background — size , чтобы фон выглядел отлично.
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 Если задаём фоновую картинку для блока со светлым текстом, то обязательно задаём и фоновый цвет.
Почему это важно: если при загрузке страницы картинка будет долго загружаться или вообще не загрузится, то светлый текст на белом будет совершенно не виден. Пользователь потеряет контекст и, вероятнее всего, интерес к вашей странице.
Пример ниже не пустой, но в нём не загрузилась фоновая картинка:
Фронтенд-блог: чиним вёрстку одной строкой
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>
.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%); >
Как добавить изображение фоном. Свойство background-image
background-image позволяет добавить изображение в качестве фона для выбранного элемента. Фоновое изображение может быть любого типа и повторяться или масштабироваться в зависимости от настроек.
Значения
- url(‘путь_к_изображению’) — указывает путь к изображению. Вы можете указать относительный путь к изображению на вашем сервере или абсолютный URL для изображения в интернете.
- none — значение по умолчанию, где нет фона. Если не хотите использовать изображение в качестве фона, вы можете установить background-image: none; .
- linear-gradient() , radial-gradient() , repeating-linear-gradient() , repeating-radial-gradient() — создают градиент фона без использования изображений. Можно определить цветовую палитру и ориентацию градиента.
Повторное изображение
background-repeat: repeat; — значение по умолчанию, изображение повторяется по горизонтали и вертикали. Изображение будет заполнять фон элемента, повторяясь при необходимости.
background-repeat: repeat-x; — повторяется только по горизонтали.
background-repeat: repeat-y; — повторяется только по вертикали.
background-repeat: no-repeat; — отображается только один раз без повторения.
Размер изображения
background-size: auto; — отображается в своём естественном размере.
background-size: cover; — масштабируется так, чтобы полностью заполнить фон элемента, возможно, обрезая его.
background-size: contain; — масштабируется так, чтобы полностью поместиться в фон элемента без искажений. Белые полосы могут появиться по краям фона, если пропорции изображения и фона не совпадают.
Наследование
Свойство background-image не наследуется дочерними элементами. Каждый элемент должен самостоятельно задавать фоновое изображение.
Примеры использования
Добавление изображения на фон определённого элемента
Добавление повторяющегося изображения на фон элемента
Добавление градиента на фон
Нюансы использования
- Фоновые картинки не будут автоматически масштабироваться под размеры родительского элемента. Если размеры картинки и родительского элемента не совпадают, то картинка обрежется или начнёт повторяться.
- Если задать цвет фона и background-image для одного элемента, то картинка будет отображаться поверх цвета фона.
⭐ Поддержка браузерами свойства background-image
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.