Background Position

Background Position defines where exactly on the webpage the background starts from. It can be written as: background-position: [direction] OR: background-position [direction direction] OR: background-position: [direction px direction px] and other ways. You don't even need to specify a direction, just a measurement value and it can work the same way. You can even specify a percentage, or a global value.

Attachment

the Background Attachment property determines whether or not the background scrolls as the page does, or stays at it's starting position. The only local settings for these are Scroll, Fixed, and Local, but they can be combined. Normal Global values also apply. Scroll and Fixed moves the background with the text while the page scrolls, while Local keeps the background in it's place.

Size

The Background size determines how much of the screen the chosen image takes up. the Contain property keeps it at it's normal size. no-repeat prevents it from copying itself across the entirety of the page. the Cover property makes it so that the image covers the entire screen. In addition, the background size can be determined by a pixel amount, or a percentage amount. Any area that the image does not take up is taken up by the background color, and color takes priority on an image that has transparency.

Edge Offset Value

Edge Offset Value is another property within Background Position. This property allows you to get as specific as you want about where you want the background to start. Like above, it is defined as: Direction length Direction length etc, with the directions being either top/bottom/left/right/center, and the lengths can be defined in either pixels, percentages, or ems.

Multiple Stack Order

Multiple stack order is a feature you can use in your website to effectively place elements on top of each other. By giving adding a Z-index value into your code, you can determine if certain elements are higher or lower than other ones. The collection of rules described in the linked page above allow you to have a nearly limitless number of combinations with which to stack images, colors, and just about anything else.

Summary

In summary, we talked about the major things you can do to affect where your background sits on the webpage, the size of the image and if it repeats or not, if the background moves with the text or not, the specific positioning of the background relative to text, and we also learned about the ability to stack elements on top of each other with z-index and stack orders.