Background - Position
The background-position property controls where a background image is positioned within an element. This position is defined using horizontal and vertical coordinates relative to the edges of the element’s box. It can be written using one to four values. When non-keyword values are used, the first value defines the horizontal position, and the second defines the vertical position. Common value formats include:
- (1 Value) Keywords: left, right, top, bottom, center
- (2 Value) Percentages: 25%, 75%
- (2 Value) Lengths: 10px, 20px
- (Multiple Values 3 to 4) Edge offset values: bottom 10px right 20px
Background - Attachment
The background-attachment property controls how a background image is positioned relative to the viewport, determining whether it remains fixed or scrolls with the page. Some values include:
- Fixed: The background remains stationary within the viewport.
- Local: The background scrolls along with the element’s content.
- Scroll: The background moves with the element as the page scrolls.
- Multiple values can be applied when using multiple background images, such as: fixed, scroll or scroll, fixed.
Background - Size
The background-size property sets the size of an element’s background image. Any space that is not covered by the background image is filled with the background color. If the image is transparent, the background color will also be visible. The background-size property can be written in different ways using various keyword values.
- Contain: The image becomes as large as possible within its container without being cropped or stretched. If the container is larger than the image, the image may begin to tile unless the background-repeat property is set to no-repeat.
- Cover: The image scales to completely cover the container, leaving no empty space. If the container’s proportions differ from the image, cropping may occur.
- Auto: The image scales in the corresponding direction while maintaining its original proportions.
- Length: This is written using pixel values and will stretch the image in the specified direction. Negative values are not allowed.
- Percentage: This is written as a percentage (such as 30%). Negative values are not allowed. The image scales relative to the container and may tile if it does not fully cover the space.
Background - Edge Offset Value
The background edge offset value is part of the background-position property. It enables more precise positioning by allowing offsets from specific edges, rather than relying solely on standard values. This approach is especially useful when positioning an image relative to the right or bottom edge instead of the default top-left. It can be written in a couple different ways:
- background-position: bottom 10px right 20px
- background-position: right 3em bottom 10px
- background-position: top right 10px
Background - Multiple Stack Order
When using multiple background images, they can be layered on top of one another, with the first listed image appearing in the foreground and the last in the background. These backgrounds are defined using a comma-separated list. It is important to note that, when using the shorthand background property, the background-color value can only be specified in the final layer.
Summary
The CSS background documentation explains how to control where a background appears, how it scrolls, how large it is, and how multiple backgrounds are layered. The background-position property handles placement, including precise edge offsets. The background-attachment property determines whether the image scrolls, stays fixed, or moves with the element’s content. The background-size property controls scaling, with options such as cover, contain, or exact dimensions. When multiple backgrounds are used, the first listed appears on top, the last is at the back, and only the final layer can include a background color. Altogether, these properties give developers strong control over both decorative and functional page backgrounds.