background-attachment

background-attachment

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

Синтаксис

background-attachment: fixed | scroll | inherit

background-attachment: fixed | scroll | local[, fixed | scroll | local]*

Значения

fixed Делает фоновое изображение элемента неподвижным. scroll Позволяет перемещаться фону вместе с содержимым. inherit Наследует значение родителя. local Фон фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон выходящий за рамки элемента остаётся на месте.

HTML5 CSS2.1 IE Cr Op Sa Fx

        
Пример текста
  

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundAttachment

Браузеры

В браузере Internet Explorer 6 значение fixed работает только для тегов или .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Chrome поддерживает значение local с версии 4.0.

Safari поддерживает значение local с версии 5.0.

Firefox не понимает значение local .

CSS по теме

Источник

CSS background-attachment Property

A background-image that will not scroll with the page (fixed):

body <
background-image: url(«img_tree.gif»);
background-repeat: no-repeat;
background-attachment: fixed;
>

More «Try it Yourself» examples below.

Definition and Usage

The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed.

Default value:	scroll
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS1
JavaScript syntax:	object.style.backgroundAttachment=»fixed» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description
scroll	The background image will scroll with the page. This is default
fixed	The background image will not scroll with the page
local	The background image will scroll with the element’s contents
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

A background-image that will scroll with the page (scroll). This is default:

body <
background-image: url(«img_tree.gif»);
background-repeat: no-repeat;
background-attachment: scroll;
>

Example

How to create a simple parallax scrolling effect (create an illusion of 3D depth):

.fixed-bg <
/* The background image */
background-image: url(«img_tree.gif»);

/* Set a specified height, or the minimum height for the background image */
min-height: 500px;

/* Set background image to fixed (don’t scroll along with the page) */
background-attachment: fixed;

/* Center the background image */
background-position: center;

/* Set the background image to no repeat */
background-repeat: no-repeat;

/* Scale the background image to be as large as possible */
background-size: cover;
>

Источник

background-attachment

Если указано background-image , CSS свойство background-attachment определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.

Начальное значение	scroll
Применяется к	все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Синтаксис

/* Ключевые значения */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* Глобальные значения */ background-attachment: inherit; background-attachment: initial; background-attachment: unset; 

Значение свойства background-attachment задаётся одним из ключевых значений из списка ниже.

Значения

Фон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с background-clip: text .)

Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.

Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)

Формальный синтаксис

background-attachment =
# (en-US)

=
scroll | (en-US)
fixed | (en-US)
local

Примеры

Простой пример

HTML

p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. p> 

CSS

p  background-image: url("starsolid.gif"); background-attachment: fixed; > 

Результат

Поддержка нескольких фоновых изображений

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

HTML

p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again. Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them. However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted! p> 

CSS

p  background-image: url("starsolid.gif"), url("startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; > 

Результат

Спецификации

Совместимость браузеров

BCD tables only load in the browser

Источник

CSS Background Attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):

Example

Specify that the background image should be fixed:

body <
background-image: url(«img_tree.png»);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
>

Example

Specify that the background image should scroll with the rest of the page:

body <
background-image: url(«img_tree.png»);
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
>

The CSS Background Attachment Property

Property	Description
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник