DONT ADD ANYTHING HERE!

  1. The background-position CSS property sets the initial position for each background image.
  2. The position is relative to the position layer set by background-origin
  3. A position defines an x/y coordinate, to place an item relative to the edges of an element's box.
  4. It can be defined using one to four values
    1. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position
    2. If only one value is specified, the second value is assumed to be center
    3. If three or four values are used, the length-percentage values are offsets for the preceding keyword value(s)
  5. 1-value syntax
    1. The keyword value center, which centers the image
    2. One of the keyword values
      1. top
      2. left
      3. bottom
      4. right
      The other dimension is then set to 50%, so the item is placed in the middle of the edge specified
    3. A length or percentage. This specifies the X coordinate relative to the left edge, with the Y coordinate set to 50%
  6. 2-value syntax
    One value defines X and the other defines Y. Each value may be:
    1. One of the keyword values
      1. top
      2. left
      3. bottom
      4. right
    2. If left or right is given, then this defines X and the other given value defines Y
    3. If top or bottom is given, then this defines Y and the other value defines X
    4. Note that:
      1. If one value is top or bottom, then the other value may not be top or bottom
      2. If one value is left or right, then the other value may not be left or right
      This means, e.g., that top top and left right are not valid
  7. 3-value syntax
    Two values are keyword values, and the third is the offset for the preceding value
  8. 4-value syntax
    1. The first and third values are keyword values defining X and Y
    2. The second and fourth values are offsets for the preceding X and Y keyword values

Example

Greem Strip
Greem Strip

Code

CSS

    .outer {
        border: 1em solid purple;
        background-color: lightgoldenrodyellow;
        background-image: url("../images/mySmallBlueSquare25_25.png");
        background-repeat: no-repeat;
        background-position: center;
        text-align: center;
    }

JavaScript

    arr = [["topright", "top right"], 
           ["center", "center"], 
           ["top", "top"], 
           ["bottom", "bottom"], 
           ["top30right", "top 30% right"], 
           ["top30right30", "top 30% right 30%"], 
           ["topleft", "top left"], 
           ["bottom30left", "bottom 30% left"], 
           ["bottom30left30", "bottom 30% left 30%"]];

    for (const x of arr) {

        document.getElementById(x[0]).addEventListener('click', function () {
            document.querySelector('.outer').style.backgroundPosition = x[1]
        })
    }

References

MDN: background-position