2R - CSS Background Properties

background - position

This property sets the initial position of a background image. The MDN website, which I have in my faves has a cool tool to illustrate how background-position works. It also provides syntax for keyword values, percentage values, and much more.

background - attachment

This property controls if a background image remains fixed or scrolls in the viewport. The MDN website also has a tool that demonstrates and syntax examples.

background - size

This property allows a content creator to change the size of an image in css. It is useful when you want to play with the siz to get the image to balance with the rest of the content. The MDN page has tools for this one as well.

background - edge offset value

This property allows a content creator to set a background image relative to the edge of the element in which it is contained. I dod not find a cool tool for this one yet.

background - multiple stack order (location of color value)

We talked about this in class. We used it in the header where we used images on top of the background image. Only the last one in the stack, the one that shows up on the bottom on the page can include color.

Summary

The MDN website has tools for many of these techniques and many many more. I do not have a bunch of confidence now, but as I play with these techniques and research them I am getting more comfortable.