Пример

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

Источник

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

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

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

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

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

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

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

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

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

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

Источник

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.

Источник

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

Источник