Добавить фоновый рисунок на веб-страницу - «Фоновая картинка» » Новости мира Интернет
К сентябрю Apple подготовит ряд новых функций для iOS 27 - «Новости сети»
К сентябрю Apple подготовит ряд новых функций для iOS 27 - «Новости сети»
Веб-версия Google Earth получила общедоступный авиасимулятор - «Новости сети»
Веб-версия Google Earth получила общедоступный авиасимулятор - «Новости сети»
Россияне массово раскупают дешёвые новинки Apple — MacBook Neo и iPhone 17e стали хитами - «Новости сети»
Россияне массово раскупают дешёвые новинки Apple — MacBook Neo и iPhone 17e стали хитами - «Новости сети»
Trouver выпустила робот-пылесос S70 Roller с роликовым мопом и станцией самообслуживания - «Новости сети»
Trouver выпустила робот-пылесос S70 Roller с роликовым мопом и станцией самообслуживания - «Новости сети»
Первый складной iPhone будет коротким в сложенном состоянии, а в разложенном будет напоминать iPad mini - «Новости сети»
Первый складной iPhone будет коротким в сложенном состоянии, а в разложенном будет напоминать iPad mini - «Новости сети»
Logitech выпустила складную мышь Mobi Fold: она помещается в карман и работает месяц без подзарядки - «Новости мира Интернет»
Logitech выпустила складную мышь Mobi Fold: она помещается в карман и работает месяц без подзарядки - «Новости мира Интернет»
Яндекс запустил в продажу наушники Яндекс Дропс – первое носимое устройство компании с Алисой AI - «Новости мира Интернет»
Яндекс запустил в продажу наушники Яндекс Дропс – первое носимое устройство компании с Алисой AI - «Новости мира Интернет»
Anthropic выпустила Claude Fable 5 – общедоступную ИИ-модель класса Mythos - «Новости мира Интернет»
Anthropic выпустила Claude Fable 5 – общедоступную ИИ-модель класса Mythos - «Новости мира Интернет»
ChatGPT получил новую память – пользователи смогут просматривать и редактировать воспоминания ИИ - «Новости мира Интернет»
ChatGPT получил новую память – пользователи смогут просматривать и редактировать воспоминания ИИ - «Новости мира Интернет»
Apple представила iOS 27 и новую Siri AI: главные анонсы WWDC 2026 - «Новости мира Интернет»
Apple представила iOS 27 и новую Siri AI: главные анонсы WWDC 2026 - «Новости мира Интернет»
Новости мира Интернет » Самоучитель 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.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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

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



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