CSS Background Position

A background position is CSS property that sets the original position for the background images. Some examples of background position include: background-position:top,left, center, 25% 75%, bottom 50px right 100px. A position is a x/y coordinate- therefore the first value represents the horizontal position and the second value represents the vertical. It is important to include all values or the value after will be written as center.

CSS Attachment

A background attachment is a CSS property that coordinates whether or not a background images position is set within the viewport or scrolls with the block it is in. A background attachment is fixed to the viewport meaning if the code has a scrolling element the background will not move with the element. The scrolling value will not scroll with the contents and is rather on the elements border. If there are multiple different background attachments, background attachments can be separated by commas.

CSS Background Size

Background size is a CSS property that controls the size of an elements background photo, with background size it can be expanded or restricted to fill space.It is important that all spaces are filled with the background color property otherwise the background color will be seen behind the backround images that are see-through or translucent. In order to use the background size property it must have either values of (contain or cover), a width value and not a height value, or a width and a height value.

CSS Background Edge Offset Value

Background Edge Offset value is a part of the position value which is an x/y coordinate that can have 1 to 4 values; top, left, bottom, right. If there is only one or two values the values could be center or could be top, left, bottom or right. In a 3 value syntax this is where two of the values are keywords and the last is the offset for the value. For example the first value can either be top, left,bottom, right or center. If left or right is used then this is describing X and if top or bottom is used then the value is describing Y and the other value is going to describe X. Similar to a 3 value syntax, a 4 value syntax is where the first and the third values are keyword values describing X and Y. The second and the fourth values are then offsets for the previous X and Y values. Lengths or Perecentages are used for each value syntax. With percentages, the percentage offset of a given image is relative to the container, so if there is a value of 0% then the top or left edge of the background image is going to line up with the edge of the container. The size of the background image is subtracted from the container dimension so then a percentage of the value is used as an offset from the left or top edge.

CSS Multiple Stack Order

Background multiple stack order in CSS is backgrounds that are layered on one another starting with the first background at the beginning and the last background at the end. When using multiple backgrounds it is important that the order of the property values are in order, starting with background color,background image, background repeat, background attachment and background position. Not all of the property values will always be used; however; the order still has to stay the same.

Summary

In CSS backgrounds there are many different properties and values in order to create a background. Making sure that all background values are included is important to make sure that the background will look and act how you want it to. Minor misspellings or incorrect values can cause the site to not look the way you want it or work how you want it to. It is important to double check your code and use site validators to ensure it works for everyone else.