Добавить фоновый рисунок на веб-страницу - «Фоновая картинка» » Новости мира Интернет
OxygenOS и Realme UI отправят на свалку истории — OnePlus и Realme перейдут на ColorOS - «Новости сети»
OxygenOS и Realme UI отправят на свалку истории — OnePlus и Realme перейдут на ColorOS - «Новости сети»
К выпуску готовится антикризисный SSD Samsung 990 с PCIe 4.0 и скоростью чтения до 7250 Мбайт/с - «Новости сети»
К выпуску готовится антикризисный SSD Samsung 990 с PCIe 4.0 и скоростью чтения до 7250 Мбайт/с - «Новости сети»
Китай испытал самый выносливый апогейный ракетный двигатель в мире — он вдвое превзошёл западные аналоги - «Новости сети»
Китай испытал самый выносливый апогейный ракетный двигатель в мире — он вдвое превзошёл западные аналоги - «Новости сети»
Власти Сингапура арестовали особняк стоимостью $42 млн у подозреваемых в контрабанде ИИ-ускорителей Nvidia - «Новости сети»
Власти Сингапура арестовали особняк стоимостью $42 млн у подозреваемых в контрабанде ИИ-ускорителей Nvidia - «Новости сети»
Японцы намерены переводить ДВС на водород вместо использования топливных ячеек - «Новости сети»
Японцы намерены переводить ДВС на водород вместо использования топливных ячеек - «Новости сети»
Яндекс запускает платформу ИИ-агентов для Алисы AI - «Новости мира Интернет»
Яндекс запускает платформу ИИ-агентов для Алисы AI - «Новости мира Интернет»
Anthropic представила Claude Sonnet 5 – бюджетную модель с производительностью уровня Opus 4.8 - «Новости мира Интернет»
Anthropic представила Claude Sonnet 5 – бюджетную модель с производительностью уровня Opus 4.8 - «Новости мира Интернет»
Bigme выпустила гибрид смартфона и электронной книги с двумя экранами - «Новости мира Интернет»
Bigme выпустила гибрид смартфона и электронной книги с двумя экранами - «Новости мира Интернет»
Activision вынуждена рекламировать, что Call of Duty: Modern Warfare 4 не будет на релизе в Game Pass - «Новости сети»
Activision вынуждена рекламировать, что Call of Duty: Modern Warfare 4 не будет на релизе в Game Pass - «Новости сети»
Власти США предложили $10 млн за информацию о хакерах, атакующих пользователей WhatsApp и Signal - «Новости сети»
Власти США предложили $10 млн за информацию о хакерах, атакующих пользователей WhatsApp и Signal - «Новости сети»
Новости мира Интернет » Самоучитель 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.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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

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



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