CSS Backgrounds

/* CSS Background Properties */

/* Background color */
.element {
  background-color: #3498db;
  background-color: rgba(52, 152, 219, 0.8); /* With transparency */
  background-color: hsl(204, 70%, 53%); /* HSL format */
}

/* Background image */
.element {
  background-image: url('image.jpg');
  background-image: linear-gradient(to bottom, #3498db, #2c3e50);
  background-image: radial-gradient(circle, #3498db, #2c3e50);
  background-image: conic-gradient(red, yellow, green, blue, red);
}

/* Background repeat */
.element {
  background-repeat: repeat; /* Default - repeats in both directions */
  background-repeat: repeat-x; /* Repeats horizontally only */
  background-repeat: repeat-y; /* Repeats vertically only */
  background-repeat: no-repeat; /* Does not repeat */
  background-repeat: space; /* Repeats without clipping, with even spacing */
  background-repeat: round; /* Repeats without clipping, scaling if needed */
}

/* Background position */
.element {
  background-position: center; /* Keyword values */
  background-position: top left;
  background-position: 50% 50%; /* Percentage values */
  background-position: 10px 20px; /* Length values */
}

/* Background size */
.element {
  background-size: auto; /* Default - original size */
  background-size: cover; /* Scales to cover the entire element */
  background-size: contain; /* Scales to fit within the element */
  background-size: 50% 50%; /* Specific width and height */
  background-size: 300px 200px; /* Specific dimensions */
}

/* Background attachment */
.element {
  background-attachment: scroll; /* Default - scrolls with element */
  background-attachment: fixed; /* Fixed relative to viewport */
  background-attachment: local; /* Scrolls with element's content */
}

/* Background origin */
.element {
  background-origin: padding-box; /* Default - relative to padding box */
  background-origin: border-box; /* Relative to border box */
  background-origin: content-box; /* Relative to content box */
}

/* Background clip */
.element {
  background-clip: border-box; /* Default - extends behind border */
  background-clip: padding-box; /* Extends to inside of border */
  background-clip: content-box; /* Extends to content only */
  background-clip: text; /* Clips background to text (webkit) */
}

/* Multiple backgrounds */
.element {
  background: 
    url('top-image.png') top left no-repeat,
    url('middle-image.png') center no-repeat,
    url('bottom-image.png') bottom right no-repeat,
    linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(0,0,0,0.5));
}

/* Shorthand background property */
.element {
  background: #3498db url('image.jpg') center/cover no-repeat fixed;
  /* color image position/size repeat attachment */
}

/* Background blend modes */
.element {
  background-blend-mode: normal; /* Default */
  background-blend-mode: multiply;
  background-blend-mode: screen;
  background-blend-mode: overlay;
  background-blend-mode: darken;
  background-blend-mode: lighten;
  background-blend-mode: color-dodge;
  background-blend-mode: color-burn;
  background-blend-mode: hard-light;
  background-blend-mode: soft-light;
  background-blend-mode: difference;
  background-blend-mode: exclusion;
  background-blend-mode: hue;
  background-blend-mode: saturation;
  background-blend-mode: color;
  background-blend-mode: luminosity;
}