Page 57 - CSS

Unit Description

valuepx Offsets background image by a length given in pixels relative to the top left of
valuepx the background positioning area

Units in CSS can be specified by different methods (see here).

Longhand Background Position Properties

In addition to the shorthand property above, one can also use the longhand background properties
background-position-x and background-position-y. These allow you to control the x or y positions
separately.

NOTE: This is supported in all browsers except Firefox (versions 31-48) 2. Firefox 49,
to be released September 2016, will support these properties. Until then, there is a
Firefox hack within this Stack Overflow answer.

Background Attachment

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

body {
background-image: url('img.jpg');
background-attachment: fixed;
}

Value Description

scroll The background scrolls along with the element. This is default.

fixed The background is fixed with regard to the viewport.

local The background scrolls along with the element's contents.

initial Sets this property to its default value.

inherit Inherits this property from its parent element.

Examples

background-attachment: scroll

The default behaviour, when the body is scrolled the background scrolls with it:

https://riptutorial.com/ 35