CSS Colors & Backgrounds

CSS offers many ways to set color: color names, HEX, RGB, RGBA, HSL, and HSLA. All of them paint text, backgrounds, and borders.

CSS Colors

CSS offers many ways to set color: color names, HEX, RGB, RGBA, HSL, and HSLA. All of them paint text, backgrounds, and borders.

Real-life example: Color names are like saying red or blue. HEX and RGB are like exact paint mix codes from a hardware shop.

Color formats

.named { color: tomato; }

.hex {
  color: #0891b2;       /* cyan */
  background: #f0fdfa;
}

.rgb {
  color: rgb(8, 145, 178);
  background: rgb(240, 253, 250);
}

.rgba {
  /* last number = opacity 0 to 1 */
  background: rgba(8, 145, 178, 0.15);
}

.hsl {
  /* hue, saturation, lightness */
  color: hsl(188, 91%, 36%);
  background: hsl(166, 76%, 97%);
}

Background Color

background-color fills the area behind an element's content and padding. It does not include the margin area.

Real-life example: background-color is like painting the wall behind a photo frame, not the space outside the frame.

Background color

body {
  background-color: #f8fafc;
}

.alert {
  background-color: #fef2f2;
  color: #991b1b;
  padding: 1rem;
  border-radius: 8px;
}

Background Image & Repeat

You can set a background image with background-image. background-repeat controls whether the image tiles. Use no-repeat for logos and hero sections.

Real-life example: repeat is like wallpaper that copies the same pattern. no-repeat is like hanging one big poster on the wall.

Image and repeat

.hero {
  background-image: url("hero-bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.pattern {
  background-image: url("dots.png");
  background-repeat: repeat;
}

Background Attachment & Shorthand

background-attachment: fixed keeps the image still while you scroll (parallax feel). The shorthand background combines color, image, repeat, position, and size in one line.

Real-life example: fixed attachment is like a window view that stays still while furniture moves. Shorthand is like writing one order instead of five separate notes.

Attachment and shorthand

.parallax {
  background: url("sky.jpg") center / cover no-repeat fixed;
  min-height: 60vh;
}

.card {
  /* color image repeat position / size */
  background: #fff url("icon.svg") no-repeat 1rem center / 24px;
  padding-left: 3rem;
}

Opacity

opacity makes the whole element see-through, from 0 (invisible) to 1 (solid). It affects the element and all its children together.

Real-life example: opacity is like frosted glass — everything inside the glass looks lighter, not just one part.

For text on colored backgrounds, prefer rgba or hsla on background-color instead of opacity on the whole box — child text stays sharp.

Opacity vs rgba

.fade-box {
  opacity: 0.7;
}

/* Better for text readability — only background is transparent */
.soft-panel {
  background: rgba(15, 23, 42, 0.6);
  color: white;
  padding: 1.5rem;
}