Свойство background позволяет снабдить графическим фоном любой элемент Вэб-страницы.
Для использования графического фона надо указать имя и местоположение файла, содержащего соответствующее изображение. Для этого служит атрибут URL.
Разберём код:
Code
<body style="background:url('http://ssilki.at.ua/image/3.gif') repeat-x #000000;">
background:url('http://ssilki.at.ua/image/3.gif') - указывает на адрес фонового изображения;
#000000- задаёт цвет фона;
Атрибут repeat определяет степень повторяемости фонового изображения и может иметь следующие значения:
repeat - изображение бесконечно повторяется по горизонтали и вертикали, заполняя собой все фоновое пространство браузера;
repeat-x - изображение повторяется по горизонтали;
repeat-y - изображение повторяется по вертикали;
no-repeat- изображение не повторяется.
По умолчанию браузер пытается размножить изображение таким образом, чтобы целиком заполнить пространство.
Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.
Атрибут scroll - определяет подвижность/статичность фона.
Background-attachment: scroll - фон перемещается вместе с содержимым страницы;
Background-attachment: fixed- фоновая графика статична.
По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана.
Свойство background -position - определяет положение картинки в окне браузера (top, middle, bottom, left, center, right)().
При копировании изображения с целью заполнения площади элемента браузер воспринимает значение этого свойства в качестве отправной точки.
Координаты начального положения изображения можно задавать:
1) в виде процентных отношений (20%);
Code
background-position: 20% 20%
2) в виде абсолютных значений в пикселях (15px);
Code
background-position: 15px 15px
3) в виде абсолютных значений в сантиметрах (5cm);
Code
background-position: 5cm 5cm
3) в виде констант (top left).
Code
background-position: top left
Для изменения цвета фона служит свойство background-color.
Цвет фона может задаваться:
1) название цвета (red, yellow);
Code
background-color: red
2) шестнадцатеричным значением (#FF00AA);
Code
background-color: #FF00AA
3) функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.
Значение transparent указывает на то, что фон является прозрачным, т.е. отсутствует.
Code
background-color: transparent
Материалы на эту же тему:
Создание красивого раздвижного меню для сайта
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу
