Добавить фоновый рисунок на веб-страницу - «Фоновая картинка» » Новости мира Интернет
Windows 11 научилась работать с MIDI 2.0 без сторонних драйверов - «Новости мира Интернет»
Windows 11 научилась работать с MIDI 2.0 без сторонних драйверов - «Новости мира Интернет»
Яндекс запустил новый сервис такси Fasten - «Новости мира Интернет»
Яндекс запустил новый сервис такси Fasten - «Новости мира Интернет»
Microsoft научилась хранить данные до 10 000 лет в посудном стекле - «Новости мира Интернет»
Microsoft научилась хранить данные до 10 000 лет в посудном стекле - «Новости мира Интернет»
Microsoft начала тестировать Windows 11 27H2 — под это в Windows Insider создали новый канал - «Новости сети»
Microsoft начала тестировать Windows 11 27H2 — под это в Windows Insider создали новый канал - «Новости сети»
Подзаряжаемые гибриды потребляют гораздо больше топлива, чем заявлено, показало исследование - «Новости сети»
Подзаряжаемые гибриды потребляют гораздо больше топлива, чем заявлено, показало исследование - «Новости сети»
Razer выпустила флагманскую клавиатуру Huntsman Signature Edition в алюминиевом корпусе за $500 - «Новости сети»
Razer выпустила флагманскую клавиатуру Huntsman Signature Edition в алюминиевом корпусе за $500 - «Новости сети»
Отечественная замена МКС задерживается: старт развёртывания Российской орбитальной станции теперь планируется на 2028 года - «Новости сети»
Отечественная замена МКС задерживается: старт развёртывания Российской орбитальной станции теперь планируется на 2028 года - «Новости сети»
Акции Raspberry Pi взлетели на 94 % за неделю после вирусного поста про «домашний ИИ» - «Новости сети»
Акции Raspberry Pi взлетели на 94 % за неделю после вирусного поста про «домашний ИИ» - «Новости сети»
Anthropic выпустила Claude Sonnet 4.6 с контекстом на 1 млн токенов - «Новости мира Интернет»
Anthropic выпустила Claude Sonnet 4.6 с контекстом на 1 млн токенов - «Новости мира Интернет»
В Google Документах добавили функцию по составлению аудиосводок с помощью ИИ - «Новости мира Интернет»
В Google Документах добавили функцию по составлению аудиосводок с помощью ИИ - «Новости мира Интернет»
Новости мира Интернет » Самоучитель 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.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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

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



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