CSS3 Essentials  
  1. Background
    1. Background area: Underneath total area of element's content, padding, and border.
    2. The background doesn't covered under the margin. 
  2. Background shorthand
    1. background: background-color | background-image | background-position | background-size | background-repeat | background-origin | background-clip | background-attachment | initial | inherit; -- Values position aren't fixed.
    2. All property values are optional.
    3. background: yellow linear-gradient(to bottom, red, #blue 50%, green) no-repeat 99% center;
  3. background-color 
    1. Default background color transparent.
    2.  <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor.
    3. background-color: #f00;
  4. background-repeat
    1. The default value is repeat. Until background is filled the background image keep repeating.
    2. <no-repeat> | <repeat-x> | <repeat-y> | <repeat>
  5.  background-image
    1. Invisible to assistive technologies like screen readers.
    2. background-image: url|none|initial|inherit
    3. background-image: url("../img/ept.jpg");
    4. background-image: url("star.gif"), url("background.tif");
  6. background-image:linear-gradient()
    1. Smooth color transitions across a background.
    2.  Syntax: background-image: linear-gradient(direction, color-stop1, color-stop2, ...);[2]
    3. Direction:
      1. to bottom, to right, to bottom right, to bottom left, etc.
      2. 0deg is equivalent to top, 90deg is equivalent to to right, up to 360deg top again.
    4. Sample
      1. background-image: linear-gradient(red, green, blue);
      2. background-image: linear-gradient(to right, red , green);
      3. background-image: linear-gradient(to bottom right, yellow , blue);
      4. background-image: linear-gradient(to right, red, violet, orange, green, blue, yellow); 
      5. background-image: linear-gradient(to right, rgba(255,0,1,0), rgba(255,0,10,1));
      6. background-image: linear-gradient(180deg, red 40%, blue);
      7. background-image: repeating-linear-gradient(to right, green, red 25px, blue 50px);
  7. background-position
    1. background-position
      1. Absolute values like pixels — for example background-position: 110px 29px.[1] 
      2. Relative values like rems — for example background-position: 23rem 2.8rem.[1]
      3. Percentages — for example background-position: 97% 23%.[1]
      4. Keywords — for example background-position: right center. These two values are intuitive.
        1. <left> | <center> | <right> | <top> | <center> | <bottom>.
      5. Mix and match these values, for example background-position: 99% center.
      6. One value, that value will be assumed to be the horizontal value, and the vertical value will default to center. Single value (left, right, top, bottom ) or combination of two value. [background-position:center;] or [background-position:left center;].
  8. background-size
    1. <auto> : Default. Original size of image [background-size: auto].
    2. <length>: Static value [background-size: 200px 100px;].
    3. <percent>: Percent value [background-size: 200%;].
    4. <cover>: Widely used. Try to cover full container even stretch or cut any of the edge [background-size:cover;].
    5. <contain>: Show full image even resize is required but may not fit with the container[background-size:contain;].
    6. initial | inherit 
  9. background-attachment
    1. When the content scrolls then background-attachment specifying how the backgrounds scroll.
    2. <scroll>
      1. This is default.
      2. The background image will scroll when content scrolls on the page.
    3. <fixed>
      1. The background image will not scroll when content scrolls on the page.
      2. The background is fixed relative to the viewport. [1]
    4. <local>
      1. The background is fixed relative to the element's contents. [1]
    5. Syntax: <background attachment> = scroll | fixed | local | mix()
  10. Multiple background-image
    1. Backgrounds are stacked on top of one another with the first appearing at the top, then the second below it, then the third, etc. [1]
    2. Off using background shorthand is a good practice.
    3. background-image: url("..."), url("..."), ...;
    4.  p {  
      background-image: url("..."), url("...");
      background-attachment: scroll, fixed;
      background-repeat: no-repeat, repeat-y;
      }
  11. background-clip
    1. Background color/image has extend to the edge of the border. This behavior can be changed using the background-clip property.
      1. <border-box>
        1. Start background form content's start point of border.
        2. Default value.
        3. #bg-border-box{ border: 5px dotted black; padding: 10px; background: yellow; background-clip: border-box; }
      2. padding-box
        1. Start background form content's start point of padding.
        2. #bg-padding-box{ border: 5px dotted black; padding: 10px; background: yellow; background-clip: padding-box; }
      3.  content-box
        1. Start background form content's start point of content.
        2. #bg-padding-box{ border: 5px dotted black; padding: 10px; background: yellow; background-clip: content-box; }
  12. Ref:
    1. https://developer.mozilla.org
    2. https://www.w3schools.com/cssref/func_linear-gradient.asp