Set the position of a background image relative to the rest of the page.
Syntax
background-attachment: scroll | fixed | local | inherit ;
scroll - The background image scrolls with the rest of the page (default).
Fixed - Position the image relative to the entire window.
local - The background image scrolls with the element.
inherit - inherit from the parent element
When background-attachment is set to fixed, then the image (if it's small and set to not repeat) can scroll outside the containing DIV and become invisible. Test your layout by resizing the web browser.
New in CSS3 is the ability to specify multiple background images. You can (optionally) specify the background-attachment for multiple images as a comma-separated list, these will then be applied (in order) to each of the images specified by background-image.
Examples:
h1 { background-attachment: fixed; }
.emw3class {
background-attachment: inherit; }
#emw3id { background-attachment: scroll; }
Try it:
This is a sample of text that can be given a CSS background. This is a sample of text that can be given a CSS background. This is a sample of text that can be given a CSS background. This is a sample of text that can be given a CSS background. |
After pressing apply - scroll the page to see how the fixed background does not move with the scrolling page.
(CSS 1) Browser Support: All major browsers.
“Something is wrong here, and it's more than easy access to guns or violence on TV. It's about lack of love and attachment to loving people early in life ~ Rob Reiner
Related:
Background-attachment - MDN Web Docs.
Background-Color - The background color of an element.
Background-Image - The background image for an element.
Background-Position - Starting position of a background image.
Background-Repeat - How a background image will be repeated.
background - A shorthand property for the properties above.