The position property dictates how an element is positioned within a web document. A number of different values can be attached to the property, including static (default value which positions element according to normal flow of the document), relative (positions element according to normal flow, then offsets relative to itself based on top/right/bottom/left/z-index properties), absolute (removes element from normal flow and positions it relative to closest positioned ancestor or its initial container), fixed (removes element from normal flow and positions it relative to its initial containing block), and sticky (positions element according to normal flow, then offsets it relative to its nearest scrolling ancestor and containing block).
The background-attachment property determines whether the position of a background image is fixed or scrolls with its containing block. The values pertaining to this property are fixed (the background image is fixed relative to the viewport and does not move with the element(s)), local (the background image is fixed relative to an element's contents), and scroll (the background image is fixed relative to the element itself and does not scroll with contents).
The background-size property sets the size of an element's background image. It can be set by using keyword values contain or cover, by using a width value only (defaults the height to auto), or by using both width and height values, which can be length, percentage, or auto.
Edge offset value refers to setting background images to be positioned relative to a specified edge while adjusting incrementally. For example, an image with the property background-position: left 10px bottom 10px will position the item in the bottom left corner with a 10px offset.
Multiple stack order refers to layering of multiple background images within an element, which can be accomplished by first writing the code for the image that will appear on top, followed by images appearing underneath. The first image included will display "in front" of the following images.
While setting a background image may seem straightforward and simple, there are many properties and values that can be added and tweaked to alter where and how images are displayed in the background of a web page. Knowing how each property works and how to change the values can allow you to have better control over how your images are displayed, rather than letting the browser alone dictate where a background image is supposed to appear.