Як додати фоновий малюнок на веб-сторінку?

23.09.2010

Влад Мержевич

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>

У цьому прикладі фон веб-сторінки заданий кольором хакі, а текст - білим. Також додано фонове зображення, яке при завантаженні закриває собою фоновий колір.

фон

Часті запитання