Как добавить фоновый рисунок на веб-страницу?

🕛 22.01.2009, 23:58

Чтобы добавить фоновую картинку на веб-страницу, задайте путь к изображению внутри значения url атрибута background, который в свою очередь добавляется к селектору BODY.

Общий синтаксис добавления фона следующий.

<style type="text/css"> BODY { background: url(путь к файлу); }
</style>

Путь к графическому файлу будет различаться, в зависимости от того, где он располагается относительно текущего документа. Например, если HTML-документ и графический файл с именем bg.gif хранятся в одной папке, то достаточно задать url(bg.gif).
При добавлении фоновой картинки учтите, что изображение загружается не сразу, поэтому цвет фона должен быть таким, чтобы сохранить достаточный контраст между цветом текста и фона. Лучше всего устанавливать цвет фона близким к цвету фонового рисунка, здесь опять же поможет универсальный атрибут background, как показано в примере 1.

Пример 1. Добавление фона

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Фон</title> <style type="text/css"> BODY { background: #666 url(images/bg.png); /* Цвет фона и путь к графическому файлу */ color: #fff; /* Цвет текста */ } </style> </head> <body> <p>...</p> </body>
</html>

В данном примере фон веб-страницы задан серым цветом, а текст - белым. Также добавлено фоновое изображение, которое при загрузке закрывает собой фоновый цвет.