CSS provides extensive control over element backgrounds, from simple colors to complex images and gradients.

background-color

Set a solid background color:

div {
  background-color: #f5f5f5;
}

background-image

Use an image as background:

div {
  background-image: url('pattern.png');
}

background-repeat

Control how images tile:

div {
  background-repeat: no-repeat;  /* Don't tile */
}

Values:

• repeat - tile both directions (default)
• repeat-x - tile horizontally only
• repeat-y - tile vertically only
• no-repeat - don’t tile

background-position

Position the background image:

div {
  background-position: center center;
}

Values can be keywords (top, right, bottom, left, center) or lengths/percentages.

background-size

Control image dimensions:

div {
  background-size: cover;
}

Values:

• auto - natural size
• cover - fill container, may crop
• contain - fit within container
• Specific values: 100px 200px or 50% auto

background-attachment

Control scrolling behavior:

div {
  background-attachment: fixed;  /* Stays in place when scrolling */
}

Values: scroll (default), fixed, local

background-clip

Define where background is painted:

div {
  background-clip: padding-box;
}

Values:

• border-box - extends under border (default)
• padding-box - stops at border
• content-box - only in content area

The background Shorthand

Combine multiple properties:

div {
  background: url('image.png') center/cover no-repeat #f5f5f5;
}

Order: image position/size repeat color

Gradients

Create smooth color transitions:

Linear Gradient

div {
  background: linear-gradient(to right, #ff0000, #0000ff);
}

With angle:

div {
  background: linear-gradient(45deg, #ff0000, #0000ff);
}

Multiple color stops:

div {
  background: linear-gradient(to right, red, yellow, green);
}

Radial Gradient

div {
  background: radial-gradient(circle, #fff, #333);
}

Multiple Backgrounds

Layer multiple backgrounds:

div {
  background:
    url('overlay.png') center/cover,
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('photo.jpg') center/cover;
}

First listed appears on top.

Common Patterns

Hero Image

.hero {
  background: url('hero.jpg') center/cover no-repeat;
  min-height: 100vh;
}

Overlay on Image

.card {
  background:
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url('photo.jpg') center/cover;
}

Lessons in this unit:

0:	Introduction
1:	How to Work with CSS Fonts
2:	How to Style Text with CSS Typography
3:	How to Use CSS Colors
4:	▶︎ How to Use CSS Backgrounds
5:	How to Use CSS Filters
6:	How to Use CSS Units
7:	How to Use the CSS calc() Function
8:	How to use Google Fonts
9:	RGB color codes