CSS | Background

⌚ 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