Пример

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.

Источник

Фоновое изображение и неподвижный фиксированный CSS фон

В этом уроке мы продолжаем рассматривать свойства фона.

Пример того, как зафиксировать фоновое изображение в нужном месте:

Текст документа Текст документа Текст документа Текст документа

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

background-attachment:fixed фиксирует фоновое изображение в заданной позиции.

background-position: задает точные координаты фона по горизонтали и по вертикали.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

CSS позиция фона Как зафиксировать фон Фиксированный CSS margin

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | Неподвижный фон в CSS? – Не вопрос!

Источник

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 по теме

Источник

background-attachment¶

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

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

Демо¶

• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size

Синтаксис¶

/* Keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* Global values */ background-attachment: inherit; background-attachment: initial; background-attachment: unset; 

Значения¶

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

background-attachment: scroll; 

Применяется ко всем элементам

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

Поддержка браузерами¶

Can I Use background-attachment? Data on support for the background-attachment feature across the major browsers from caniuse.com.

Описание и примеры¶

Пример 1¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

 html> head> meta charset="utf-8" /> title>background-attachmenttitle> style> body  background-image: url('/example/image/help.png'); background-attachment: fixed; > style> head> body> div style="height:2000px">Пример текстаdiv> body> html> 

Пример 2¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

 html> head> meta charset="utf-8" /> title>background-attachmenttitle> style> body  background-image: url('/example/image/pattern-left.png'), url('/example/image/pattern-right.png'); background-repeat: repeat-y, repeat-y; background-position: left, right; background-attachment: fixed, fixed; > style> head> body> div style="height:2000px">div> body> html> 

Источник

background-attachment

The background-attachment CSS property sets whether a background image’s position is fixed within the viewport, or scrolls with its containing block.

Try it

Syntax

/* Keyword values */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; /* Global values */ background-attachment: inherit; background-attachment: initial; background-attachment: revert; background-attachment: revert-layer; background-attachment: unset; 

The background-attachment property is specified as one of the keyword values from the list below.

Values

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn’t move with the element. (This is not compatible with background-clip: text .)

The background is fixed relative to the element’s contents. If the element has a scrolling mechanism, the background scrolls with the element’s contents, and the background painting area and background positioning area are relative to the scrollable area of the element rather than to the border framing them.

The background is fixed relative to the element itself and does not scroll with its contents. (It is effectively attached to the element’s border.)

Formal definition

Formal syntax

Examples

Simple example

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; > 

Result

Multiple background images

This property supports multiple background images. You can specify a different for each background, separated by commas. Each image is matched with the corresponding type, from first specified to last.

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; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

Источник