DONT ADD ANYTHING HERE!

  1. The background-image CSS property sets one or more background images on an element
  2. The background images are drawn on stacking context layers on top of each other
  3. The first layer specified is drawn as if it is closest to the user
  4. The borders of the element are then drawn on top of them
  5. And the background-color is drawn beneath them
  6. If a specified image cannot be drawn (for example, when the file denoted by the specified URI cannot be loaded), browsers handle it as they would a none value
  7. Even if the images are opaque and the color won't be displayed in normal circumstances, web developers should always specify a background-color
  8. Each background image is specified either as the keyword none or as an image value
  9. To specify multiple background images, supply multiple values, separated by a comma
  10. values
    1. none
      Is a keyword denoting the absence of images
    2. image
      1. Is an image denoting the image to display
      2. There can be several of them, separated by commas, as multiple backgrounds are supported

Example

Greem Strip

Notes

  1. The background-color is yellow
  2. The green and blue strips are background images
  3. The orange strip is a foreground image (specified with the img tag

CSS

.outer {
  background-image: url("../images/myGreenStrip25_100.png"), 
    url("../images/myBlueRectange100_25.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: lightgoldenrodyellow;

} 

#color-coding>li:nth-child(2) {
    border: 0.5em;
    border-style: none solid none solid;
    border-left-color: blue;
    border-right-color: lime;
    padding-left: 0.2em;
}

References

MDN: background-image