Research Documentation - CSS Background Properties

Background - Position

CSS background position is a property that allows you to control the positioning of a background image within its container element. It is used to set the starting point or position of the background image within the container.

The background-position property accepts two values, which represent the horizontal and vertical positions of the background image. The values can be specified in different units such as pixels, percentages, or keywords like top, bottom, left, right, center, etc

Background - Attachment

CSS background attachment is a property that determines whether a background image is fixed or scrolls along with the content of its container. The background-attachment property accepts two values: "scroll" and "fixed".

Background - Size

CSS background size is a property that specifies the size of a background image in CSS. It allows you to control how a background image is sized and displayed within its container element.

The background-size property can take one or two values, representing the width and height of the background image respectively. The values can be specified in different units such as pixels, percentages, or keywords like "contain" and "cover".

Background - Edge Offset Value

Edge offsets refer to the distance between the edges of an element and the edges of its parent element or other adjacent elements.

There are four different types of edge offsets in CSS: 'margin', 'border', 'padding', and 'content'.

Background - Multiple Stack Order

This sets the background color of an element. Possible values include color names (e.g. "red", "blue"), hexadecimal values (e.g. "#FF0000", "#0000FF"), RGB values (e.g. "rgb(255,0,0)", "rgba(0,0,255,0.5)"), and HSL values (e.g. "hsl(0,100%,50%)", "hsla(240,100%,50%,0.5)").

Summary

These properties can be used individually or in combination to create a wide variety of background effects on web pages. By adjusting the color, image, position, size, and attachment of an element's background, you can create a visually appealing and engaging design.