CSS Colors & Backgrounds

Colors and backgrounds make your designs visually appealing. CSS provides multiple color formats and powerful background options.

Color Formats

Named Colors

color: red;
color: blue;
color: green;

140 named colors — easy to remember but limited.

Hexadecimal

color: #ff0000;      /* Full 6-digit hex */
color: #f00;         /* Shorthand (3-digit) */
color: #ff000080;    /* With alpha (8-digit) */

RGB

color: rgb(255, 0, 0);         /* Red */
color: rgb(0, 255, 0);         /* Green */
color: rgb(0, 0, 255);         /* Blue */

RGBA (with transparency)

color: rgba(255, 0, 0, 0.5);   /* 50% transparent red */
color: rgba(0, 0, 0, 0.8);     /* 80% opaque black */

HSL (Hue, Saturation, Lightness)

color: hsl(0, 100%, 50%);      /* Red */
color: hsl(120, 100%, 50%);    /* Green */
color: hsl(240, 100%, 50%);    /* Blue */

HSLA (with transparency)

color: hsla(0, 100%, 50%, 0.5); /* 50% transparent red */

Background Properties

Background Color

background-color: #3498db;
background-color: rgba(52, 152, 219, 0.8);

Background Image

background-image: url('image.jpg');
background-image: url('pattern.png');

Background Repeat

background-repeat: repeat;           /* Repeat both (default) */
background-repeat: repeat-x;         /* Repeat horizontally */
background-repeat: repeat-y;         /* Repeat vertically */
background-repeat: no-repeat;        /* No repeat */
background-repeat: space;            /* Even spacing */
background-repeat: round;            /* Fill container */

Background Position

background-position: center;         /* Center */
background-position: top right;      /* Top right */
background-position: 50% 50%;        /* Center (percentage) */
background-position: 20px 40px;      /* Fixed position */

Background Size

background-size: auto;               /* Original size (default) */
background-size: cover;              /* Fill container */
background-size: contain;            /* Fit inside container */
background-size: 100px 200px;        /* Custom size */
background-size: 50% auto;           /* Percentage */

Background Attachment

background-attachment: scroll;       /* Scroll with page (default) */
background-attachment: fixed;        /* Fixed in viewport */
background-attachment: local;        /* Scroll with content */

Background Clip

background-clip: border-box;         /* Extends to border (default) */
background-clip: padding-box;        /* Extends to padding */
background-clip: content-box;        /* Content only */
background-clip: text;               /* Clips to text */

Background Origin

background-origin: padding-box;      /* Starts at padding (default) */
background-origin: border-box;       /* Starts at border */
background-origin: content-box;      /* Starts at content */

Shorthand

/* background: color image repeat position size */
background: #3498db url('image.jpg') no-repeat center/cover;

/* Multiple backgrounds */
background:
  url('pattern.png') repeat,
  linear-gradient(to bottom, #fff, #eee),
  #333;

Gradients

Linear Gradient

/* Top to bottom (default) */
background: linear-gradient(blue, green);

/* Left to right */
background: linear-gradient(to right, blue, green);

/* Diagonal */
background: linear-gradient(to bottom right, blue, green);

/* Custom angle */
background: linear-gradient(45deg, blue, green);

/* Multiple stops */
background: linear-gradient(to right, red, orange, yellow, green, blue);

Radial Gradient

/* Center (default) */
background: radial-gradient(circle, blue, green);

/* Ellipse */
background: radial-gradient(ellipse, blue, green);

/* Custom position */
background: radial-gradient(circle at top left, blue, green);

Conic Gradient

/* Color wheel */
background: conic-gradient(red, orange, yellow, green, blue, purple, red);

/* Pie chart */
background: conic-gradient(#3498db 0% 50%, #2ecc71 50% 100%);
border-radius: 50%;

Transparency

Opacity

.element {
  opacity: 1;    /* Fully visible (default) */
  opacity: 0.5;  /* 50% transparent */
  opacity: 0;    /* Fully transparent */
}

Note: Opacity affects the entire element and its children.

RGBA vs Opacity

/* RGBA: Only background is transparent */
.background {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;  /* Text remains opaque */
}

/* Opacity: Everything is transparent */
.element {
  opacity: 0.5;
  color: white;  /* Text becomes transparent too */
}

Complete Example

.hero {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)),
    url('hero.jpg') center/cover no-repeat;
  color: white;
  padding: 100px 20px;
  text-align: center;
}

.card {
  background: white;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background-color: #f5f5f5;
}

.button {
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(52, 152, 219, 0.4);
}

.overlay {
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Best Practices

1. Use HSL — Easier to adjust colors
2. Use RGBA for transparency — More control than opacity
3. Use cover for backgrounds — Fills container properly
4. Use gradients sparingly — Can be distracting
5. Test contrast — Ensure readability

Common Mistakes

1. Using opacity instead of RGBA — Affects children
2. Not providing fallback color — For older browsers
3. Overusing gradients — Can look unprofessional
4. Ignoring contrast — Text must be readable
5. Using too many colors — Stick to a palette