Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная CSS по шагам Свойства CSS Background-attachment Background-color

Свойство background-attachment

Описание

Свойство background-attachment определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента или будет неподвижным.

Это свойство применимо ко всем элементам.

Значение

- fixed – фоновое изображение неподвижно – прокручивается только содержимое  элемента;

- scroll - фоновое изображение прокручивается вместе с содержимым элемента.

- inherit - принимает значение свойства родительского элемента.

Значение по умолчанию

- scroll


Пример

Пример 1 - Свойство background-attachment. Значение fixed

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство background-attachment. Значение fixed </title>

<style type="text/css">
body {background-image:url(../img/peng_128.gif);
background-repeat:repeat-y;
background-attachment:fixed}
</style>

</head>
<body>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
</body>
</html>

При просмотре в браузере

Как видно из примера: фоновое изображение (повторяющийся по вертикали пингвин) неподвижно. Прокручивается только содержимое страницы!


Пример 2 - Свойство background-attachment. Значение scroll

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title> Свойство background-attachment. Значение scroll </title>

<style type="text/css">
body {background-image:url(../img/peng_128.gif);
background-repeat:repeat-y;
background-attachment:scroll}
</style>

</head>
<body>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>9</p>
</body>
</html>

При просмотре в браузере

В этом примере - наоборот: фоновое изображение прокручивается вместе с содержимым страницы!


Свойство Background Свойство Background-attachment Свойство Background-color
Свойства CSS
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru