CSS Background Position

The CSS background position property determines where a background image is displayed based on the background-origin property (border-box, padding-box, or content-box). When coding this CSS rule, the following values can be chosen first: top, bottom, left, right, and center. The position of the background image is then placed based on an x-y axis, where the x-axis, or horizontal position value, is listed first and then the y-axis, or vertical position value, is listed second. When there is no second position value provided, the default is “center”. As mentioned in class, positive values move in, and negative values move out, and can be provided in length or percentage (relative to the container). I found the "Try It” tool on the MDN Reference page very helpful to understand these further! I thought this property was quite handy in assignment 2 where multiple images could be used in a background and placed in different locations around the element! Additionally in my research, I discovered there could also be 3-value and 4-value syntax provided. In the case of 3-value syntax, the third value is the offset for the preceding value. In the case of 4-value syntax, the third and fourth values are the offset for both x and y.

CSS Background Attachment

The CSS background attachment property determines how the background moves or does not move as the content on the page is scrolled through. When coding this CSS rule, the following values can be chosen: scroll, fixed, and local. If there are multiple background images, more than one value can be selected. Again, I found the MDN Reference “Try It” tool very helpful to visually understand how these work! With the value “fixed”, the background remains in place in the viewport, even if content can be scrolled. With the value “scroll”, the background remains in place in the element, even if the content in the element can be scrolled. With the value, “local”, the background scrolls with the content.

CSS Background Size

The CSS background size property determines how large or small the background image is. When coding this CSS rule, the following values can be chosen: contain, cover, or the size of a background image can be determined by a length or a percentage. The value of “auto” can also be chosen, which scales the background image in that its core ratios or sizes remain intact. Some background images, like gradients, may not have core ratios or sizes. With the value, “contain”, the background image is set to be as large as possible in the container, and if not large enough to fill it, will begin to tile (unless the no-repeat background property is coded). With the value, “cover”, the image size is scaled to fill the entire container and will be cropped to fit the container without losing its ratio. The background size can also be set at a specific length or percentage, where the percentage is based on the image’s background-positioning area.

CSS Background Edge of Offset

As mentioned earlier regarding the background position property, a third and fourth value can be provided within the background position property to determine the offset of the x and y values (where does the horizontal and vertical value begin). In playing around with the MDN Reference “Try It” tool, I discovered the default is top and left, however, providing an offset value can move the image starting from the right or bottom as well. This can be provided as a length value or a percentage value. A percentage value is based off of background-origin property.

CSS Background Multiple Stack Order (Location of Color Value)

When designing with multiple background colors or images, the order in which the code is provided is important. Whatever background is listed first will be the background that is closest to the user. How the backgrounds are specifically arranged also depends on the background-origin property. The very last background coded should be the overall background-color. This way if other images do not load, at least the background color is loaded. If not listed last, the other background images will not load properly. I also went down the rabbit hole with accessibility and color choices and found this WebAIM tool very handy when evaluating color contrasts! I went ahead and changed some of the colors I chose for assignment 2 based on this resource!

Summary of Documentation

There are a variety of ways multiple images can be used within just the background of a web page! It will definitely take practice trying out all of these different properties and values over time to gain a better sense of how these work when designing a website. These CSS properties provide another way to get creative with how I could use the background to get the look and feel desired from a web page. I had not investigated the “Try It” tool very much on the MDN Reference site before and I really appreciate how it helps me visually see what is going on as values change!