CSS Background Properties and Values Documentation

Background - position

The background-position property in CSS allows you to specify the position of a background image within its containing element. You can set it using values like center, top, left, or numeric values for horizontal and vertical positions. Example:

            .container {
                background-image: url('example.jpg');
                background-position: center top;
            }
            

Background - attachment

The background-attachment property determines whether a background image scrolls with the content or remains fixed in place. You can use values like scroll or fixed. Example:

            .container {
                background-image: url('example.jpg');
                background-attachment: fixed;
            }
            

Background - size

The background-size property allows you to control the size of a background image. You can use values like contain to fit the image within its container or cover to cover the entire container while maintaining the image's aspect ratio. Example:

            .container {
                background-image: url('example.jpg');
                background-size: cover;
            }
            

Background - edge offset value

The concept of "edge offset value" is not a standard CSS property. However, you can create custom CSS variables to achieve edge offsets for background images, providing precise control over the image placement relative to the container's edges. Example:

            .container {
                --offset-x: 10px;
                --offset-y: 20px;
                background-image: url('example.jpg');
                background-position: calc(50% + var(--offset-x)) calc(50% + var(--offset-y));
            }
            

Background - multiple stack order (location of color value)

The background property in CSS allows you to stack multiple background layers and specify the order and location of color values, images, and gradients. This feature is useful for creating complex and visually appealing backgrounds for your web pages. Example:

            .container {
                background: linear-gradient(to bottom, #f06, #9f6), url('example.jpg')
                center center / cover no-repeat;
            }
            

Summary of the Documentation

This documentation is a guide to CSS background properties and their practical usage. It covers key concepts, including background image positioning, attachment behavior, sizing options, custom edge offsets, and the stacking order of multiple background layers. By following the examples provided, you can harness the full potential of CSS background properties to create visually appealing and well-structured web designs.