Как сделать картинку фоном в html
Чтобы установить картинку в качестве фона в HTML, можно использовать свойство background-image в CSS.
Например, чтобы установить картинку «background.jpg» в качестве фона для элемента body , можно использовать следующий код:
body background-image: url('background.jpg'); background-repeat: no-repeat; background-size: cover; >
В этом примере свойство background-image задает путь к файлу изображения. Свойство background-repeat устанавливает, как изображение будет повторяться. Тут мы устанавливаем значение no-repeat , чтобы изображение не повторялось. Свойство background-size устанавливает размер изображения. В данном примере мы устанавливаем значение cover , чтобы изображение занимало всю доступную область и сохраняло свои пропорции.
background-image
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.
Синтаксис
background-image: url(путь к файлу) | none | inheritbackground-image: url(путь к файлу) | none[, url(путь к файлу) | none]*Значения
url В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url() . Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них. none Отменяет фоновое изображение для элемента. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
background-image .
Объектная модель
[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
Фон для TR 1 2 3
Результат данного примера в браузере Chrome показан на рис. 1. Браузер Internet Explorer, Opera и Firefox корректно отображают фон для строки (рис. 2).
Рис. 1. Повторение фона для каждой ячейки
Рис. 2. Фон для всей строки
background — image
Полезное свойство, если нужно поставить на фон картинку или задать декоративное изображение. Можно даже градиент!
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Картинка плюс цвет
- Несколько фоновых картинок
- Градиент на фоне
- Егор Левченко советует
- Алёна Батицкая советует
Контрибьюторы:
Обновлено 31 декабря 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Свойство 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> 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>.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%); >Фон в CSS (background-color, background-image)
Свойство background-color используется для заливки элемента определённым цветом. Делать заливку заднего фона можно не только блочным элементам, но и строчным. Пример использования свойства:
Тише, мыши, кот на крышеРезультат будет такой:
Тише, мыши, кот на крышеКартинка в качестве фона (background-image)
Помимо заливки области цветом, возможно поставить картинку на задний фон. Для этого необходимо использовать CSS свойство background-image.
По умолчанию фоновая картинка будет размножена как горизонтали, так и по вертикали. Поэтому получится так:
Картинка в качестве фона (background-repeat)
- no-repeat — не повторять картинку ни по горизонтали, ни по вертикали
- repeat — повторять картинку во всех направлениях
- repeat-x — повторять картинку только по горизонтали
- repeat-y — повторять картинку только по вертикали
Получится так:
Позиция (background-position)
- top — вверу
- bottom — внизу
- right — справа
- left — слева
- center — по центру