Return to Home Page...

CSS Background Properties

Background: Position

This property sets the starting position for each background image. The position is relative to a position layer set by the background origin.

Background: Attachment

The 'background-attachment' property tells the webpage to either fix an items position on the background in the viewport, or to scroll with the viewport.

Background: Size

This property determines the size of the background, and it can be left alone, stretched out, or restricted to fit a specific space.

Background: Edge Offset Value

The background edge offset value is utilized when using the 'background-position' property. The offset determines how off the background will be aligned with the container the background is in.

Background: Multiple Stack Order

Applying multiple backgrounds is possible through CSS, and the order they are applied in is dependent on the order you place them into the code. The first background listed will appear first, then the next, and so forth. The backgrounds do not overlap each other, so you can stack transparent images on top of backgrounds perfectly fine. In addition to stacking backgrounds, any properties that are applied to the 'background' property are also applied to each individual background.

Conclusion

In conclusion, there are several ways that CSS can be used to modify backgrounds, as well as create interesting uses to be able to utilize tools like background positioning and size to add extra details to certain elements on the page.