Background Position
background-position sets the initial position for each background image. This image demonstrates centering of the background image. You could also use left, top, 25% 75%, or values like bottom 30px right 80px which is an offset value as demonstrated below. There are multiple value syntax available. 1, 2, 3, and 4 value.
Background Attachment
background-attachment sets wether a background image's position is fixed within the viewport, or scrolls with its containing block. This image shows how a fixed background behaves on scrolling. There are three values for background-attachment - fixed, local, and scroll.
- Fixed: Is relative to viewport. If an element has a scrolling mechanism the background doesn't move.
- Local: Background is fixed relative to the element's contents. If the element has a scrolling the background will scroll with the element's contents.
- Scroll: Background is fixed relative to the element itself it does not scroll with its contents. It is basically attached to the element's border.
Background Size
background-size sets the size of the element's background image. The image can be left to its normal size, stretched, or constrained to fit the available space. This background covers the entire section. Spaces not covered by a background image are filled with the background-color property, and the background color will be visible behind background images that have transparency. To specify the size of multiple background images, separate the value for each one with a comma. There are 5 values.
- Contain: Scales the image as large as possible within the container without cropping or stretching. If the container is larger than the image you will get image tiling unless the background-repeat property is set to no-repeat.
- Cover: Preserves the image ratio while scaling to the smallest possible size to fill the container, leaving no empty space.
- Auto: Scaled the background image in the corresponding direction such that its intrinsic proportions are maintained.
- Length: Stretches the image in the corresponding dimension to the specified length. Negative values not allowed.
- Percentages: Stretches the image to the specified percentage of the background positioning area.
Background - Edge Offset Value
This background demonstrates offsetting from the edges using x/y values.
Multiple Backgrounds
Illustrates layering of an overlay image on top of a background image. You can use both the shorthand background property and the individual properties except for background-color. You can stack images, first image is on top while last is on bottom.
Summary
The CSS background properties allow for control over an element's background, from image placement and sizing to attachment behavior and the stacking of multiple images or colors. Understanding and utilizing these properties can significantly enhance the design and user experience of web content.
Attribution
rain PNG Designed By 琪琪 from https://pngtree.com/freepng/rain-rain-raindrops-falling-raindrops-weather_7713686.html?sol=downref&id=bef png image from pngtree.com/