Инструкция
1
Выберите картинку, которую вы хотите использовать в качестве фонового изображения. Если предполагается поверх иллюстрации вставить текст, то в этом случае желательно ограничиться вариантами без излишней пестроты, в составе которых используется несколько близких по характеру цветов. В принципе для устранения ряби можно создать «подложку» для контента, - и проблема будет успешно решена.
2
Подкорректируйте изображение с помощью программы Adobe Photoshop. Когда работа будет закончена, в меню «Файл» выберите команду «Сохранить для Web» и укажите нужную папку. Если это первое изображение, которое будет использоваться для сайта, то автоматически создается папка «Images».
3
В теге <body> пропишите атрибут background="путь к изображению". Пример записи: <body background="images\1.gif"> или <body background="url">. При этом имейте в виду, что тег <body> должен встречаться в коде только один раз, не следует его размножать.
4
Сохраните изменения в блокноте, нажмите кнопку «Обновить» в браузере. На экране появится фоновый рисунок. Если размеры изображения меньше параметров web-страницы, то картинка будет дублироваться столько раз, сколько необходимо для заполнения всего пространства. Исправить этот недостаток можно двумя способами:
• с помощью программы Adobe Photoshop установите требуемые параметры картинки в пикселах («Изображение» - «Размер изображения»);
• задайте нужные размеры в html-коде.
Например, если требуется ширина 1250 px, а высота – 650 px, то нужно дописать необходимые атрибуты для ячейки таблицы, в которую будет помещена картинка.
<table>
<tr>
<td background="images/1.gif" alt="картинка" width="1250" height="650" >
</td>
</tr>
<table>
Нельзя задать размер в теге <body> - изображение всегда будет отображаться в натуральную величину.
• с помощью программы Adobe Photoshop установите требуемые параметры картинки в пикселах («Изображение» - «Размер изображения»);
• задайте нужные размеры в html-коде.
Например, если требуется ширина 1250 px, а высота – 650 px, то нужно дописать необходимые атрибуты для ячейки таблицы, в которую будет помещена картинка.
<table>
<tr>
<td background="images/1.gif" alt="картинка" width="1250" height="650" >
</td>
</tr>
<table>
Нельзя задать размер в теге <body> - изображение всегда будет отображаться в натуральную величину.
5
Аналог ccs для вставки фонового изображения:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-image</title>
<style type="text/css">
BODY {
background-image: url(images/bg.jpg);
}
</style>
</head>
<body>
</body>
</html>
Атрибут «background-image: url(images/bg.jpg)» – путь к фоновому изображению.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-image</title>
<style type="text/css">
BODY {
background-image: url(images/bg.jpg);
}
</style>
</head>
<body>
</body>
</html>
Атрибут «background-image: url(images/bg.jpg)» – путь к фоновому изображению.
Источники:
- фоновые рисунки для сайта
