Веб-дизайн - Система: вопрос-ответ

Укр Рус Eng

Как сделать, чтобы фоном сайта была картинка? Какие должны быть коды?

Дата добавления:: 19.08.2010

Хиты:: 10759
Рейтинг:
Голосовать:: -

Ответ

Устанавливать и изменять настройки фона страниц сайта удобнее всего при помощи таблиц стилей CSS. За настройки фона отвечает свойство background, которое может иметь от 1 до 5 необязательных атрибутов. Если применить эти атрибуты к тэгу <body>, то будут заданы настройки фона для всего сайта. Также каждый из этих атрибутов может быть задан в качестве отдельного свойства.

Цвет фона можно задать при помощи атрибута background-color:
body {
background-color: #000;
}
Такой код задает черный цвет фона.

Для вставки фонового изображения используется background-image. В значении этого атрибута следует указать путь к изображению (url):
body {
background-image: url ("my-image.jpg");
}
В данном примере изображение находится в той же папке что и файл css. В противном случае следует указывать полный путь к изображению.

Чтобы изображение повторялось на экране, можно использовать одно из значений свойства background-repeat:

body {
background-image: url ("my-image.jpg");
background-repeat: repeat-x;
}

В данном примере используемое фоновое изображение будет повторяться только по горизонтали. Другие допустимые значения:

background-repeat: repeat-y – изображение повторяется только по вертикали
background-repeat: repeat – изображение повторяется по горизонтали и вертикали
background-repeat: no-repeat – изображение не повторяется

background-attachment – данное свойство определяет, будет ли фоновое изображение фиксироваться при прокрутке страницы:

background-attachment: scroll – прокручивается вместе со страницей
background-attachment: fixed – при прокрутке фон остается неподвижным
Пример:
body {
background-image: url ("my-image.jpg");
background-attachment: fixed;
}
В данном примере изображение my-image.jpg не будет перемещаться при прокрутке страницы.

background-position – задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
в фиксированных единицах (пикселы, сантиметры)
в процентах
словесно: – top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).

Пример:
body {
background-image: url ("my-image.jpg");
background-position: center;
}
В данном примере изображение будет "выровнено" по центру страницы.

Все эти настройки могут быть записаны в одном свойстве background:

body
{
background: #000 url("my-image.jpg") no-repeat fixed center;
}
В результате изображение my-image.jpg будет размещено по центру страницы имеющей черный фон и не будет перемещаться при прокрутке страницы.

Как сделать, чтобы фоном сайта была картинка? Какие должны быть коды?

Ответ

Категория

Тэги для этого материала