Добавить фоновый рисунок на веб-страницу - «Фоновая картинка» » Новости мира Интернет
АЭС — это долго: в Казахстане построят «долину ЦОД» с питанием от угольных электростанций - «Новости сети»
АЭС — это долго: в Казахстане построят «долину ЦОД» с питанием от угольных электростанций - «Новости сети»
«Да здравствует Принц!»: в ответ на отмену ремейка GOG спасёт классическую Prince of Persia: The Sands of Time от цифрового небытия - «Новости сети»
«Да здравствует Принц!»: в ответ на отмену ремейка GOG спасёт классическую Prince of Persia: The Sands of Time от цифрового небытия - «Новости сети»
«Google Фото» научились превращать фотографии пользователей в мемы с помощью ИИ - «Новости сети»
«Google Фото» научились превращать фотографии пользователей в мемы с помощью ИИ - «Новости сети»
Проблемное январское обновление Windows 11 отказывается удаляться — два способа вернуть систему в норму - «Новости сети»
Проблемное январское обновление Windows 11 отказывается удаляться — два способа вернуть систему в норму - «Новости сети»
В Китае придумали, как обмануть Вселенную и занедорого зажечь «искусственное солнце» на Земле - «Новости сети»
В Китае придумали, как обмануть Вселенную и занедорого зажечь «искусственное солнце» на Земле - «Новости сети»
Россияне оспорили отказ суда рассматривать иск о блокировке звонков в Telegram и WhatsApp - «Новости сети»
Россияне оспорили отказ суда рассматривать иск о блокировке звонков в Telegram и WhatsApp - «Новости сети»
Sony анонсировала первый за семь лет проигрыватели виниловых пластинок - «Новости сети»
Sony анонсировала первый за семь лет проигрыватели виниловых пластинок - «Новости сети»
Intel упускает миллиарды из-за дефицита процессоров и производственных проблем — акции рухнули на 11 % - «Новости сети»
Intel упускает миллиарды из-за дефицита процессоров и производственных проблем — акции рухнули на 11 % - «Новости сети»
Илон Маск пообещал, что роботы Tesla Optimus точно-точно поступят в продажу в конце 2027 года - «Новости сети»
Илон Маск пообещал, что роботы Tesla Optimus точно-точно поступят в продажу в конце 2027 года - «Новости сети»
Луна подождёт: третий пуск ракеты Blue Origin New Glenn в конце февраля доставит спутник главного конкурента Starlink - «Новости сети»
Луна подождёт: третий пуск ракеты Blue Origin New Glenn в конце февраля доставит спутник главного конкурента Starlink - «Новости сети»
Новости мира Интернет » Самоучитель 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.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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

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



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