Добавить фоновый рисунок на веб-страницу - «Фоновая картинка» » Новости мира Интернет
Южная Корея обеспечит всех граждан страны безлимитным доступом к генеративным ИИ-сервисам - «Новости сети»
Южная Корея обеспечит всех граждан страны безлимитным доступом к генеративным ИИ-сервисам - «Новости сети»
Тайвань расследует подделку маркировки печатных плат — продукцию «Made in China» выдавали за тайваньскую - «Новости сети»
Тайвань расследует подделку маркировки печатных плат — продукцию «Made in China» выдавали за тайваньскую - «Новости сети»
Всё лучшее — детям: глава Nvidia поручил своим дочери и сыну руководство проектами в сфере робототехники - «Новости сети»
Всё лучшее — детям: глава Nvidia поручил своим дочери и сыну руководство проектами в сфере робототехники - «Новости сети»
Робоутка за $399 покорила сердца разработчиков — за сутки её заказали на $2,6 млн - «Новости сети»
Робоутка за $399 покорила сердца разработчиков — за сутки её заказали на $2,6 млн - «Новости сети»
Японцы испытали «силовое поле» для торможения возвращаемых кораблей в атмосфере - «Новости сети»
Японцы испытали «силовое поле» для торможения возвращаемых кораблей в атмосфере - «Новости сети»
Автор утечек GTA VI показал первый геймплей за Лусию и обвинил Rockstar в эксплуатации работников - «Новости сети»
Автор утечек GTA VI показал первый геймплей за Лусию и обвинил Rockstar в эксплуатации работников - «Новости сети»
Sony не разочаровала подписчиков PS Plus анонсом игр на сентябрь - «Новости сети»
Sony не разочаровала подписчиков PS Plus анонсом игр на сентябрь - «Новости сети»
Бунт персонала остановил план Цукерберга по замене 60 % сотрудников Meta✴ на ИИ-агентов - «Новости сети»
Бунт персонала остановил план Цукерберга по замене 60 % сотрудников Meta✴ на ИИ-агентов - «Новости сети»
Выпуск драйверов Nvidia GeForce Game Ready для Windows 10 прекратится в октябре - «Новости сети»
Выпуск драйверов Nvidia GeForce Game Ready для Windows 10 прекратится в октябре - «Новости сети»
Лидерство Tesla было недолгим — BYD снова стала крупнейшим производителем электрокаров в мире - «Новости сети»
Лидерство Tesla было недолгим — BYD снова стала крупнейшим производителем электрокаров в мире - «Новости сети»
Новости мира Интернет » Самоучитель 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.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

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

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



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