создание и разработка веб-сайтов
поисковая оптимизация и реклама
статьи о программировании и веб-дизайне

Ссылки по теме:
 

Стиль background

В первую очередь рассмотрим один из наиболее важных стилей, который помогает красиво оформить верстку вашей страницы — стиль background.

Как Вы уже догадались, он позволяет управлять стилем отображения фонового изображения для элементов страницы, и предоставляет довольно широкий набор свойств для манипулирования позицией, повторяемостью и размером фона.

Ниже перечислены свойства этого стиля:

background-color
background-image
background-repeat
background-attachment
background-position
background-position-x
background-position-y

background-clip
background-origin
background-size
background-quantity
background-spacing
background



background-color

Позволяет задать цвет фона для конкретного элемента страницы
Пример,

<div style="background-color:rgb(0,0,0);"> Задаем черный цвет фона </div> background-image Задает для данного элемента фоновое изображение Пример, <table style="background-image:url(top.jpg);"> <tr> <td> Задаем фоновое изображение для таблицы </td> </tr> </table> background-repeat Это свойство стиля определяет повторяемость фонового изображения. По умолчанию фон повторяется как по вертикали, так и по горизонтали, до полного заполнения элемента, к которому применяется. Для более тонкой настройки повторения фона используются следующие значения свойства background-repeat: no-repeat — изображение не повторяется; repeat-x — изображение повторяется только по горизонтали; repeat-y — изображение повторяется только по вертикали; inherit — наследует значение, установленное для родительского элемента; Пример, <table style="background-image:url(top.jpg); background-repeat:no-repeat"> <tr> <td> Фоновое изображение, установленное для таблицы, не повторяется </td> </tr> </table> background-attachment Устанавливает характер поведения фонового изображения при прокрутке окна браузера. Имеются два значения данного свойства:

scroll — изображение прокручивается вместе со страницей;
fixed — изображение фиксируется в определенной позиции относительно окна браузера;
Пример, <body style="background-image:url(top.jpg); background-attachment:fixed"> Фоновое изображение, при прокрутке страницы остается на месте </body> background-position

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

Пример, <table style="background-image:url(top.jpg); background-position:50px bottom"> <tr> <td> Фоновое изображение, отстоит на 50 пикселей от левой границы страницы снизу </td> </tr> </table>
background-position-x
background-position-y

Задаются либо в пикселях либо в процентах и дублируют свойство background-position для вертикальной или горизонтальной координаты.

background-clip

Указывает на то, должно ли фоновое изображение распространяться на область рамки элемента. Два значения: border изображение распространяется на область рамки; padding рамка изображением не заливается.

background-origin

Подобно background-clip, позволяет более точно позиционировать фоновое изображение элемента. Три значения:

border изображение распространяется на область рамки;
padding рамка изображением не заливается.
content изображение позиционируется с верхнего левого края области отведенной под содержимое элемента.

background-size

Позволяет задавать масштабирование фона страницы.

Пример, <table style="background-image:url(top.jpg); background-repeat:repeat-x; background-size:50%"> <tr> <td> На всей ширине таблице умещается ровно два изображения </td> </tr> </table>

background-quantity

Определяет количество повторений фонового изображения.

Пример, <table style="background-image:url(top.jpg); background-repeat:repeat-x; background-quantity:3"> <tr> <td> Фоновое изображение повторяется только три раза </td> </tr> </table>

background-spacing

Задает расстояния между повторяющимися фоновыми изображениями по горизонтали и по вертикали.

Пример, <table style="background-image:url(top.jpg); background-repeat:repeat-x repeat-y; background-spacing:30px 40px"> <tr> <td> Фоновое изображение повторяется с отступами по горизонтали 30 пикселей и по вертикали 40 пикселей </td> </tr> </table>

background

Это свойство универсальное и позволяет задавать сразу несколько свойств для стиля, а именно background-color, background-image, background-repeat, background-attachment и background-position.

Пример, body {background: green url(top.jpg) repeat-y fixed left top;}




10 декабря 2007 г.
Тимур Иванов