16 C
Москва
01.09.2026

23

Как поставить картинку на задний фон css

Фон в 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 — по центру

background — image

Полезное свойство, если нужно поставить на фон картинку или задать декоративное изображение. Можно даже градиент!

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Пример
  3. Как пишется
    1. Картинка плюс цвет
    2. Несколько фоновых картинок
    3. Градиент на фоне
    1. Егор Левченко советует
    2. Алёна Батицкая советует

    Контрибьюторы:

    Обновлено 2 февраля 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Свойство 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%); >

    2.10. CSS-фон

    Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.

    Свойства фона не наследуются, но фон родительского блока будет просвечивать по умолчанию из-за начального значения в background-color: transparent .

    Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.

    Свойства фона html-элементов

    • Содержание:
    • 1. Базовый цвет: свойство background-color
    • 2. Источник изображения: свойство background-image
    • 3. Укладка изображений: свойство background-repeat
    • 4. Фиксация изображения: свойство background-attachment
    • 5. Позиционирование изображений: свойство background-position
    • 6. Область рисования: свойство background-clip
    • 7. Область расположения фона: свойство background-origin
    • 8. Размер изображений: свойство background-size
    • 9. Краткая запись свойств фона: свойство background
    • 10. Множественные фоны

    1. Базовый цвет: свойство background-color

    Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.

    Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.

    Свойство не наследуется.

    background-color
    Значения:
    цвет Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent .
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента. 
    background-color: salmon; background-color: #00ff00; background-color: rgba(255, 128, 128, 0.5); background-color: currentColor; background-color: transparent; background-color: inherit; background-color: initial;

    background-color

    2. Источник изображения: свойство background-image

    Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.

    Семантически важные изображения должны предоставляться в разметке документа, например, с тегом .

    Свойство не наследуется.

    background-image
    Значения:
    изображение Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none .
    inherit Наследует значение свойства от родительского элемента. 
    background-image: none; background-image: url(http://site.ru/rose.png); background-image: url(tl.png), url(tr.png); background-image: linear-gradient(white, gray); background-image: repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%); background-image: image("sprites.svg#xywh=40,0,20,20"); background-image: inherit;

    3. Укладка изображений: свойство background-repeat

    Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.

    Свойство не наследуется.

    background-repeat
    Значения:
    repeat-x Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat .
    repeat-y Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat .
    repeat Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat . Значение по умолчанию.
    space Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space .
    round Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round .
    no-repeat Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repeat .
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента. 
    background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; ​​​​​​​background-repeat: space; ​​​​​​​background-repeat: round; ​​​​​​​background-repeat: no-repeat; background-repeat: repeat space; background-repeat: repeat repeat; background-repeat: round space; background-repeat: no-repeat round; background-repeat: inherit; background-repeat: initial;

    13

    4. Фиксация изображения: свойство background-attachment

    Свойство background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.

    Свойство не наследуется.

    background-attachment
    Значения:
    scroll Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию.
    fixed Предотвращает перемещение, фиксирует фоновое изображение на заднем плане.
    local Фоновое изображение прокручивается вместе с содержимым элемента.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента. 
    background-attachment: scroll; background-attachment: fixed; background-attachment: local; background-attachment: inherit; background-attachment: initial;

    5. Позиционирование изображений: свойство background-position

    Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.

    Свойство не наследуется.

    background-position
    Значения:
    % Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона — высота фонового изображения , где размер изображения — это размер, заданный свойством background-size . Значение по умолчанию 0% 0% .
    длина Значение длины дает фиксированную длину в качестве смещения.
    left Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края.
    center Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано.
    right Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края.
    top Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края.
    bottom Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента. 
    background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; background-position: 25% 75%; background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; background-position: 0 0, center; background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; background-position: inherit; background-position: initial;

    Если указано только одно значение, второе значение считается center . Если заданы два значения в единицах длины или % , то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.

    Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.

    Если заданы три или четыре значения в единицах длины или % , то перед каждым значением должно стоять ключевое слово, которое указывает, от какого края дается смещение. Если даны три значения, недостающее смещение считается равным нулю.

    Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.

    15

    Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:

    background_repeat_bottom

    Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:

    16

    6. Область рисования: свойство background-clip

    Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.

    Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.

    Свойство не наследуется.

    background-clip
    Значения:
    border-box Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.
    padding-box Фон закрашивает область в пределах внутренних полей элемента.
    content-box Фон закрашивает только область содержимого.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента. 
    background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; background-clip: inherit; background-clip: initial;

    12

    7. Область расположения фона: свойство background-origin

    Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).

    Свойство не наследуется.

    background-origin
    Значения:
    padding-box Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию.
    border-box Фон позиционируется относительно верхних границ рамки элемента.
    content-box Фон позиционируется относительно верхних границ области содержимого элемента.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента. 
    background-origin: border-box; background-origin: padding-box; background-origin: content-box; background-origin: inherit; background-origin: initial;

    Если для элемента установлено background-attachment: fixed , свойство не будет иметь эффекта.

    Если для элемента заданы background-clip: padding-box , background-origin: border-box , background-position: top left , и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.

    background-origin

    8. Размер изображений: свойство background-size

    Свойство background-size устанавливает размер фоновых изображений.

    Свойство не наследуется.

    background-size
    Значения:
    auto Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам.
    длина Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em .
    % Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном.
    cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
    contain Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока.
    initial Устанавливает значение свойства в значение по умолчанию.
    inherit Наследует значение свойства от родительского элемента. 
    background-size: cover; background-size: contain; background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; background-size: auto, auto; background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; background-size: inherit; background-size: initial;

    14

    9. Краткая запись свойств фона: свойство background

    Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color , background-image , background-position , background-size , background-repeat , background-origin , background-clip и background-attachment . Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.

    Если вы указываете в краткой записи фона свойство background-size , то его значения нужно будет записать через слеш / , чтобы отделить его от свойства background-position .

    background: gold; background: url("rose.png") repeat-y; background: border-box red; background: no-repeat center/80% url("../img/icon.png");

    10. Множественные фоны

    Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image . Значение none по-прежнему создает слой.

    Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.

    Как поставить на фон картинку?

    Как можно поставить на фон картинку? если картинка находится на рабочем столе в папке. можете написать код?

    94731 / 64177 / 26122
    Регистрация: 12.04.2006
    Сообщений: 116,782
    Ответы с готовыми решениями:

    Как поставить картинку на фон.
    http://htmlworker.ru/portfolio/fish_verstka/index.html вот сайт, интересно как делается картинка на.

    Как поставить картинку на передний фон?
    Здравствуйте, подскажите как на сайте http://www.test.nemogy.ru верхнюю новогоднюю картинку.

    Основоположник на всё
    Регистрация: 22.02.2010
    Сообщений: 361

    Если сайт живет на домашнем компе, надо просто прописать к ней путь.
    Что бы сделать картинку фоном сайта в интернете, она должна быть где-то в и-нете, имхо.
    Вроде так: 

    BODY BACKGROUND="Диск:\путь\имя.jpg">
    BODY BACKGROUND="http://сервер_где_она_лежит/путь/имя.jpg">

    front-end developer
    284 / 275 / 39
    Регистрация: 31.08.2010
    Сообщений: 577
    Записей в блоге: 1

    Лучше всего делать при помощи CSS:

    body style='background: url("Диск:\путь\имя") '> /body>

    Но лучше чтобы изображение для фона лежало непосредственно в папке с сайтом.
    Регистрация: 03.09.2011
    Сообщений: 279

    если на фон страницы то 

    body background="путь к картинке.jpg">/body>

    front-end developer
    284 / 275 / 39
    Регистрация: 31.08.2010
    Сообщений: 577
    Записей в блоге: 1

    Все оформление осуществляется с помощью CSS:

    body{background: url('путь к картинке');}

    P.S. Лучше поместите файл с фоном в папку с html-страницей.
    Регистрация: 30.07.2013
    Сообщений: 4

    Добавляю такой код, картинку кладу в папку с HTML страницей, но вместо картинки отображается серый фон, в чем может быть причина ?

    Регистрация: 17.04.2013
    Сообщений: 24

    Аналогичная проблема. Выгрузила html-страницы и картинки на сервер. Но картинки не отображаются, вместо них — просто белый фон. Как исправить?

    Регистрация: 20.07.2013
    Сообщений: 105

    Посмотрите консоль: выполняется ли успешно запрос на фоновую картинку и не возникают ли какие-то ошибки.

    Регистрация: 20.05.2013
    Сообщений: 7

    Проверьте правильность путей к картинке. Не стоит забывать, что регистр имени и формата картинки учитываются.

    Регистрация: 17.04.2013
    Сообщений: 24
    Проверяла. Пути и регистр в порядке. Значит проблема в чем-то другом.
    Регистрация: 20.07.2013
    Сообщений: 105

    ЦитатаСообщение от shikochan Посмотреть сообщение

    Проверяла. Пути и регистр в порядке. Значит проблема в чем-то другом.
    Смотрели консоль?
    Регистрация: 13.07.2013
    Сообщений: 69
    Создаете папку под именем img, потом пошли CSS код: 

    1 2 3 4
    body { background-image: url('img/имя.jpg'); }

    и еще:
    Если не работает, то проверьте в теге подключение стилей css: 

    link href='style.css' type='text/css' rel='stylesheet' />

    Бывает у меня тоже такое, не применяется сразу стиль, который я написал, поэтому, просьба обновить страницу (F5), а не просто зайти на эту страницу

    Администратор
    11995 / 5332 / 268
    Регистрация: 05.04.2011
    Сообщений: 14,086
    Записей в блоге: 2

    ЦитатаСообщение от Ainuruxa1 Посмотреть сообщение

    Бывает у меня тоже такое, не применяется сразу стиль, который я написал
    Заводим себе браузер для верстки и в нем отключаем кеш раз и навсегда — намертво.
    87844 / 49110 / 22898
    Регистрация: 17.06.2006
    Сообщений: 92,604
    Помогаю со студенческими работами здесь

    Как нормально поставить фон в форме?
    3 часа с этим парюсь, не могу нормально поставить <div <div.

    Неполучается установить картинку как фон
    не могу растерожировать картинку как фон , выходит каша. Где ошибка ?

    Как вставить на задний фон картинку?
    помогите пожалуйста вставить на задний фон картинку(вместо серого)

    Читать:
    Почему не заводится ваз 2114

Похожие записи

Как отключить автосохранение медиа в ватсап

admin

Как отформатировать диск с windows

admin

Как установить драйвер на тачпад acer

admin