WeasySuite - 3.5 Affixing Images: the ‘background-attachment’ property

Chapter 3 - Backgrounds - 3.5 Affixing Images: the ‘background-attachment’ property

Go to the relevant page of the specification.

attachment-local-clipping-color-1 (dom): background-{attachment: local; clip: border-box; color}
attachment-local-clipping-color-2 (dom): background-{attachment: local; clip: padding-box; color}
attachment-local-clipping-color-3 (dom): background-{attachment: local; clip: content-box; color}
attachment-local-clipping-color-4 (dom): background-{attachment: local; clip: border-box; color}; border-radius
attachment-local-clipping-color-5 (dom): background-{attachment: local; clip: padding-box; color}; border-radius
attachment-local-clipping-color-6 (dom): background-{attachment: local; clip: content-box; color}; border-radius
attachment-local-clipping-image-1 (dom): background-{attachment: local; clip: border-box; image}
attachment-local-clipping-image-2 (dom): background-{attachment: local; clip: padding-box; image}
attachment-local-clipping-image-3 (dom): background-{attachment: local; clip: content-box; image}
attachment-local-clipping-image-4 (dom): background-{attachment: local; clip: border-box; image}; border-radius
attachment-local-clipping-image-5 (dom): background-{attachment: local; clip: padding-box; image}; border-radius
attachment-local-clipping-image-6 (dom): background-{attachment: local; clip: content-box; image}; border-radius
attachment-local-positioning-2 (dom): background-attachment: local; positioning area
attachment-local-positioning-3 (dom): background-attachment: local; positioning area with dir=rtl
attachment-local-positioning-4 (dom): background-attachment: local; positioning area with dir=rtl, top left
attachment-local-positioning-5 (dom): background-{attachment: local; origin: content-box}; positioning area
attachment-scroll-positioning-1 (dom): background-attachment: scroll; positioning area
background-004: Background with attachment
Background shorthand with attachment only sets its background-attachment subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-repeat' is set to 'repeat', 'background-position' is set to '0% 0%.
background-005: Background with position
Background shorthand with position only sets its background-position subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-repeat' is set to 'repeat', 'background-attchment' is set to 'scroll'.
background-008: Background with (color attachment)
Background with (color attachment) sets the background of the element to the color specified. Attachment does nothing since image is not set.
background-012 (image, interact): Background with (image attachment)
Background with (image attachment) sets the background to the image specified, tiling it to cover the full area, and the background scrolls with the box.
background-016: Background with (repeat attachment)
Background with (repeat attachment) does not affect the background since image is not set.
background-018: Background with (attachment color)
Background with (attachment color) sets the background of the element to the color specified. Attachment does nothing since there is no image.
background-019 (image, interact): Background with (attachment image)
Background with (attachment image) sets the background to the image specified, tiling it to cover the full area, and the background scrolls with the box.
background-020: Background with (attachment repeat)
Background with (attachment repeat) does not affect the background since image is not set.
background-021: Background with (attachment position)
Background with (attachment position) does not affect the background since image is not set.
background-025: Background with (position attachment)
Background with (position attachment does not affect the background since image is not set.
background-attachment-fixed (interact): 'Background-attachment' with value 'fixed'
If 'background-attachment' is given the value 'fixed,' then the background image remains fixed in relation to the user agent viewport when the viewport is scrolled.
background-attachment-local (interact): 'Background-attachment' with value 'local'
If 'background-attachment' is given the value 'local,' then the background image scrolls with the containing element's content when the element's content is scrolled
background-attachment-local-scrolling: Scrolling when 'background-attachment: local'
If 'background-attachment: local' the background scrolls along with the element's contents (the UA may treat 'background-clip: border-box' as the same as 'background-clip: padding-box').