Добавить фоновый рисунок на веб-страницу - «Фоновая картинка» » Новости мира Интернет
Рейтинг TIOBE за февраль 2026: Python лидирует, но теряет долю, а нишевые языки идут в рост - «Новости мира Интернет»
Рейтинг TIOBE за февраль 2026: Python лидирует, но теряет долю, а нишевые языки идут в рост - «Новости мира Интернет»
В предстоящем обновлении Windows готовят новые эмодзи, настройки камеры и другое - «Новости мира Интернет»
В предстоящем обновлении Windows готовят новые эмодзи, настройки камеры и другое - «Новости мира Интернет»
Toyota представила открытый 3D-движок Fluorite с интеграцией Flutter для автомобильных интерфейсов - «Новости мира Интернет»
Toyota представила открытый 3D-движок Fluorite с интеграцией Flutter для автомобильных интерфейсов - «Новости мира Интернет»
​​Alibaba вывела на рынок профессиональную ИИ-модель для генерации изображений Qwen-Image-2.0 - «Новости мира Интернет»
​​Alibaba вывела на рынок профессиональную ИИ-модель для генерации изображений Qwen-Image-2.0 - «Новости мира Интернет»
Microsoft обновила Secure Boot в Windows 11 - «Новости мира Интернет»
Microsoft обновила Secure Boot в Windows 11 - «Новости мира Интернет»
«Наслаждайтесь пиром, спите с миром»: авторы Black Myth: Wukong порадовали фанатов специальным трейлером нового боевика Black Myth: Zhong Kui - «Новости сети»
«Наслаждайтесь пиром, спите с миром»: авторы Black Myth: Wukong порадовали фанатов специальным трейлером нового боевика Black Myth: Zhong Kui - «Новости сети»
Власти России начали ограничивать работу Telegram - «Новости сети»
Власти России начали ограничивать работу Telegram - «Новости сети»
«Сбербанк» потратит 500 миллиардов рублей на третий суперкомпьютер - «Новости сети»
«Сбербанк» потратит 500 миллиардов рублей на третий суперкомпьютер - «Новости сети»
Минцифры предложило заменить тотальную блокировку зарубежных звонков режимом «самозапрета» - «Новости сети»
Минцифры предложило заменить тотальную блокировку зарубежных звонков режимом «самозапрета» - «Новости сети»
Samsung может вернуть в смартфоны технологию времён Galaxy S9+ — как ответ iPhone 18 - «Новости сети»
Samsung может вернуть в смартфоны технологию времён Galaxy S9+ — как ответ iPhone 18 - «Новости сети»
Новости мира Интернет » Самоучитель CSS » Изображения » Добавить фоновый рисунок на веб-страницу - «Фоновая картинка»
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 3.5+ 1.0+ 1.0+ 1.0+ 1.0+

Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background, которое в свою очередь добавляется к селектору body.

Общий синтаксис добавления фона следующий.

<style>
  body { background: url(путь к файлу); 
</style>

Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif).

При добавлении фоновой картинки учтите, что изображение загружается не сразу, поэтому цвет фона должен быть таким, чтобы сохранить достаточный контраст между цветом текста и фона. Лучше всего устанавливать цвет фона близким к цвету фонового рисунка, здесь опять же поможет универсальное свойство background, как показано в примере.;1.

Пример 1. Добавление фона

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: #c7b39b url(images/bg.jpg); /* Цвет фона и путь к файлу */
    color: #fff; /* Цвет текста */
   
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

В данном примере фон веб-страницы задан цветом хаки, а текст.;— белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.


Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 1.0 3.5 1.0 1.0 1.0 1.0 Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url стилевого свойства background, которое в свою очередь добавляется к селектору body. Общий синтаксис добавления фона следующий. Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и рисунок с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif). При добавлении фоновой картинки учтите, что изображение загружается не сразу, поэтому цвет фона должен быть таким, чтобы сохранить достаточный контраст между цветом текста и фона. Лучше всего устанавливать цвет фона близким к цвету фонового рисунка, здесь опять же поможет универсальное свойство background, как показано в примере.;1. Пример 1. Добавление фона HTML5 CSS 2.1 IE Cr Op Sa Fx В данном примере фон веб-страницы задан цветом хаки, а текст.;— белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Смотрите также

А что там на главной? )))



Комментарии )))