The background-position property determines how the background is positioned. To position a background, a combination of the values: top, right, bottom, left, and bottom are used to move the image around. Any two of these combined can be used to position the background. If one value is used, the other is assumed to be center. Additionally, percentages and px values can be used in an x,y (horizontal,vertical) format to move a background to a new position.
The background-repeat property determines how a background image is displayed. The options for this are to repeat-x (repeating horizontally), repeat-y (repeating vertically), repeat (repeat both horizontal and vertical), and no-repeat (do not repeat).
The background-attachement property determines the scroll behavior of a background object. A value of scroll will create an unmoving background that simply passes by as the page is scrolled. The fixed value creates a background that remains in one place as the page is scrolled. The local value attaches the background to the element. They scroll together as one.
The background-size property determines how large the background image will be. If it is not set, the image defaults to it's original size. The contain property tells the image to cover the box as much as it can while keeping it's ratio the same. If the image isn't large enough, it will tile the image to fill the area. The cover property fills the box and will stretch the image in order to fill it completely. This can result in a distorted image if the image is not the same ratio as the box it is filling. The auto value displays the image at it's original size. A percentage can also be used with background-size in order to scale an image larger or smaller based on a percent of it's original size.
The background-position property has the option of using edge offsets to adjust the placement of the image. The values used for this are top, right, bottom, and left. The syntax for using this code is something like this: background-position: right 20px bottom 10px;. This code would move the image 20px from the right and 10px up from the bottom. This CodePen is a great resource to see the results of this property.
Background values can be stacked in order to display certain things in a certain order. This is created by using the background property with multiple images or colors after it, separated by a comma. The order of the elements determines which is displayed on the bottom vs the top. In the case of this property, the first item will be the bottom/base layer, and the last item will be on top. This is a great way to layer multiple images on top of one another, or to layer a color overlay on top of an image. To do a color overlay, the image would be listed first, followed by a background color with some transparency.
Background properties can offer numerous ways to really customize your page design. Every block that you code is unique and as such, needs a way to make the background display to look it's best. Positioning and Sizing of the background can create a perfect look to the page. Using multiple stack order is a nice way to add extra elements on top of each other in a block and allow for a custom look for that section. Each of these properites play a special part in completely customizing the look of the background on a page or within a specific block.