Colors & Backgrounds

1.hex-box { color: #e74c3c; }           /* Red, Green, Blue (Hexadecimal) */
2.rgb-box { color: rgb(46, 204, 113); } /* Red, Green, Blue (0-255) */
3.hsl-box { color: hsl(230, 70%, 50%); } /* Hue, Saturation, Lightness */

1.transparent-box {
2  /* Red, Green, Blue, Alpha */
3  background-color: rgba(52, 152, 219, 0.5);
4}

1/* Left to Right */
2background: linear-gradient(to right, #8e44ad, #3498db);
3 
4/* Diagonal */
5background: linear-gradient(45deg, red, pink);
6 
7/* From Center Outwards */
8background: radial-gradient(circle, yellow, orange);

1.box {
2  background-image: url('img.jpg');
3  background-repeat: no-repeat;
4}

1.hero-section {
2  background-size: cover;
3  background-position: center;
4}

1.parallax {
2  background-image: url('img.jpg');
3  background-attachment: fixed; /* The Magic Line */
4  background-size: cover;
5}