Позиционирование относительно окна

Итак, вы умеете размещать исходное изображение в любом месте фона элемента и можете управлять (в некоторой степени) его мозаичным размещением. Однако, как вы уже, вероятно, поняли, размещение изображения в центре элемента body, если документ достаточно велик, может означать, что фоновое изображение не будет видно читателю сразу. Ведь броузер предоставляет для документа только окно. Если документ слишком длинный и не помещается в окне полностью, пользователь может прокручивать его вперед и назад. Центр может располагаться на два или три «окна» ниже начала документа или просто достаточно далеко, тогда большая часть исходного изображения будет находиться за пределами окна броузера.

Более того, даже если исходное изображение изначально видно, оно всегда прокручивается вместе с документом и исчезнет, когда пользователь прокрутит документ дальше. Но и это препятствие можно обойти. Свойство background-attachment позволяет зафиксировать исходное изображение относительно области просмотра и, следовательно, защититься от эффекта прокрутки:

body {background-image: url(bigyinyang.gif);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;}

Первый – исходное изображение не прокручивается вместе с документом.


Второй – местоположение исходного изображения определяется размером области просмотра, а не размером (или размещением в области просмотра) элемента, в котором оно находится. В веб-броузере пользователь может задавать область просмотра, изменяя размеры окна броузера. При изменении размера окна исходная позиция фонового изображения меняется. Итак, в некотором смысле местоположение изображения не зафиксировано, но оно остается фиксированным, пока область просмотра не меняет своих размеров.

Осталось еще одно значение свойства background-attachment – прим няемое по умолчанию значение scroll. Как и ожидается, оно заставляет фон прокручиваться вместе с остальным документом при просмотре в веб-броузере и не обязательно меняет положение исходного изображения при изменении размеров окна. Если ширина документа фиксирована (возможно, явно задана ширина элемента body), то изменение области просмотра вообще не повлияет на размещение прокручиваемого исходного изображения.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Воздействие на рамки
Воздействие на элементы формы
Еще раз о повторении в определенном направлении
Замещение атрибутов
Значения, заданные в единицах измерения длины

Вернуться в раздел: CSS / 9. Цвета и фон