CSS Background

Backgrounds play an important role in how a webpage looks and feels. They help set the tone of a design, highlight sections, and bring visual structure to the layout.

CSS gives us several background properties that control everything from colors and images to positioning, sizing, and how different layers mix with each other. When these properties are used correctly, they make a page look more organized, modern, and visually balanced.

CSS Background Properties are:

  1. background
  2. background-attachment
  3. background-blend-mode
  4. background-clip
  5. background-color
  6. background-image
  7. background-origin
  8. background-position
  9. background-position-x
  10. background-position-y
  11. background-repeat
  12. background-size

See the Pen Background Example by Ritik kumar (@nsaupapt-the-animator) on CodePen.

background-color

background-color sets the solid color behind everything inside an element. It becomes the base layer and appears under images or gradients. If an image has transparency or if no image is used, this color becomes fully visible.

  • The color appears under any background image.
  • The color shows through if the image has transparent areas.
  • If no image is used, the color becomes the full background.
  • Works with all color formats (hex, rgb, rgba, hsl, etc.).

Example

.box {
  background-color: #e0e0e0;
}

background-image

background-image inserts an image or gradient behind the content of an element. You can use a single image, multiple images, or gradients. Multiple backgrounds stack like layers, where the first one stays on top.

  • Can use MULTIPLE images separated by commas (they layer like stacking papers)
  • The order matters. The first image is on the top layer.
  • Gradients are also allowed.
  • If nothing else is set, the image will repeat.

Example

.box {
  background-image: url("bg.jpg");
}

Example Linear Gradient:

.box {
background-image: linear-gradient(to right, red, yellow); /* Gradient */
}

Example Multiple Image:

.box {
background-image: url("stars.png"), url("moon.jpg"); /* Two layered images */
}

background-repeat

background-repeat controls how an image fills the available space if it’s smaller than the element. It determines whether an image repeats horizontally, vertically, everywhere, or not at all.

  • repeat
    Repeats horizontally and vertically.
  • repeat-x
    Repeats only horizontally.
  • repeat-y
    Repeats only vertically.
  • no-repeat
    Shows the image once.
  • space
    Creates even spacing between repeated images.
  • round
    Stretches the image slightly so the area is filled perfectly.

Example

.box {
  background-repeat: no-repeat;
}

background-position

background-position defines where the background image begins inside an element. It can be placed using keywords, percentages, or exact pixel values. The first value controls horizontal position, and the second controls vertical position.

Values

Keyword values:

  • left
  • right
  • top
  • bottom
  • center

These keywords can be combined such as:

  • center center
  • left top
  • right bottom

Numerical values:

  • Pixels: 20px 30px
  • Percent: 50% 50%

The first value is horizontal.
The second value is vertical.

Example

.box {
  background-position: center center;
}

background-position-x & background-position-y

These properties control horizontal (x) and vertical (y) image positioning separately. Instead of writing two values in background-position, you can adjust each direction independently.

background-position-x

Controls left-center-right or exact numeric horizontal positioning.

background-position-y

Controls top-center-bottom or numeric vertical positioning.

Example

.box {
  background-position-x: right;
  background-position-y: top;
}

background-size

background-size defines how large or small the background image should appear. It can scale the image to cover the entire container, fit inside it, or adapt to specific width and height.

Values

Keywords:

  • cover
    The image fills the entire area. Some parts may not be visible.
  • contain
    The entire image remains visible. Empty space may appear.

Exact sizes:

  • One value: 100%
    Width set, height adjusts automatically.
  • Two values: 200px 100px
    Width and height set exactly.

Example

.box {
  background-size: cover;
}

background-attachment

background-attachment decides whether the background image moves with page scrolling or stays fixed in place. It also supports element-level scrolling for scrollable containers.

Values

  • scroll
    The background moves normally with the page.
  • fixed
    The background stays in the same screen position.
  • local
    The background moves only inside the element’s own scroll area.

Example

.box {
  background-attachment: fixed;
}

background-origin

background-origin defines the reference starting area for positioning the background image. It determines whether positioning calculations begin from the border, padding, or content area.

Areas

Every element has three boxes:

  1. border-box → includes border, padding, and content
  2. padding-box → includes padding and content
  3. content-box → includes only content

Values

  • padding-box (default)
    Background position is calculated from the padding area.
  • border-box
    Background position is calculated from the outer border area.
  • content-box
    Background position is calculated from the content area only.

Example

.box {
  background-origin: content-box;
}

background-blend-mode

This property controls how multiple background layers mix with each other.

A background layer can be:

  • a background color
  • a background image
  • a gradient
  • another background image (if you use multiple images)

When you have more than one background layer, CSS needs a rule to decide how they mix.
background-blend-mode sets that rule.

If there is only one background image and no color, this property usually has no visible effect.

When two or more layers overlap, the browser must decide:

  • How bright should the final color be?
  • Should the top layer darken the layer below?
  • Should the top layer lighten the layer below?
  • Should both layers mix evenly?

background-blend-mode gives answers to these rules.

Blend modes values:

1. normal

No blending.
Layers do not mix.
Top layer simply covers bottom layer (except transparent areas).

2. multiply

Darkens the combined result.
The overlapping colors become darker.

3. screen

Lightens the combined result.
The overlapping colors become brighter.

4. overlay

Mix of multiply and screen.
Dark parts become darker.
Light parts become lighter.

5. darken

Chooses the darker value from the two layers.

6. lighten

Chooses the lighter value from the two layers.

  • This property works best when you have a background color + background image or two images.
  • The final appearance depends on both layers’ colors.
  • It does not change image size, position, or repeat behavior.
  • It only controls how colors merge.

background-clip

This property controls how far the background is allowed to extend inside the element.

It decides which parts of the element get background color or background image.

Every element has 3 important boxes:

  1. content-box
    Area where text or inner elements appear.
  2. padding-box
    Area that includes content + padding.
  3. border-box
    Area that includes content + padding + border.

background-clip chooses one of these boxes.

Values:

1. border-box

The background is painted in:

  • border
  • padding
  • content

This is the full area of the element.

2. padding-box

The background is painted in:

  • padding
  • content

The background does not appear under the border.

3. content-box

The background is painted:

  • only in the content area

Padding and border areas do not receive the background.

  • This property affects both background color and background image.
  • It does not affect the border itself.
  • It does not change padding or border thickness.
  • It only limits the background area.

background (Shorthand Property)

The background property is a shortcut that lets you set many background-related properties in one single line instead of writing them separately.

The shorthand can include any of these:

  • background-color
  • background-image
  • background-repeat
  • background-position
  • background-size
  • background-attachment
  • background-origin
  • background-clip

You can write all of them together or only the ones you need.
If you skip something, the browser uses the default value for that part.

Example:

background: #000 url("hero.jpg") no-repeat center / cover fixed;

This single line is equal to writing:

background-color: #000;
background-image: url("hero.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-attachment: fixed;

The order does not have to be perfect, but developers usually follow this sequence for clarity:

color → image → repeat → position → / size → attachment → origin → clip

  1. background-size must come after background-position, and both must be separated by /.

Example:

background: url(bg.jpg) center / cover;
  1. You can include only the values you need.
    For example:
background: url("pattern.png");

Only sets the image. Everything else remains default.

  1. You can also use multiple backgrounds using commas:
background: url("top-layer.png") no-repeat center / contain, url("bottom-layer.jpg") center / cover;

The shorthand is mostly used for cleaner and shorter CSS.

CSS Linear Gradient and Radial Gradient

CSS gradients allow you to create smooth color transitions without using images. The two most common types are linear gradients and radial gradients. Both are applied using background-image.

Linear Gradient

A linear gradient creates a color transition in a straight line.
You can control the direction and the colors.

Basic Syntax

linear-gradient(direction, color1, color2, …);

1. Direction

The direction tells the gradient which way to flow.

You can use:

  • Keywords:
    to right, to left, to top, to bottom
  • Diagonal directions:
    to top right, to bottom left
  • Angle values:
    90deg, 180deg, 45deg
    (0deg = top to bottom, 90deg = left to right)

2. Color Stops

You can set multiple colors.
Optional: you can add a position to each color.

Examples:

  • red
  • blue 40%
  • green 80%

Linear Gradient Example

.box {
  width: 300px;
  height: 200px;
  background-image: linear-gradient(to right, #ff4b4b, #4b7aff);
}

Example With Angle + Color Stop Positions

.box {
  background-image: linear-gradient(135deg, red 0%, yellow 50%, green 100%);
}

Radial Gradient

A radial gradient creates a color transition outward from a center point, forming a circle or ellipse.

Basic Syntax

radial-gradient(shape size at position, color1, color2, ...);

Main Arguments

1. Shape

  • circle
  • ellipse (default)

2. Size

Defines how large the gradient spreads:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner (default)

3. Position

Defines where the gradient starts (center point).

  • Keywords:
    center, left, right, top, bottom
  • Combined keywords:
    left top, right bottom
  • Percentage or pixel values:
    50% 50% (center), 20% 80%, etc.

4. Color Stops

Same as linear gradients.
You can define any number of colors with optional positions.

Radial Gradient Example

.box {
  width: 300px;
  height: 200px;
  background-image: radial-gradient(circle, #ff7f50, #8a2be2);
}

Radial Example With Shape + Size + Position + Stops

.box {
  background-image: radial-gradient(circle farthest-corner at 30% 40%, red 0%, yellow 40%, blue 100%); 
}

📣 Follow us for more updates:

Follow on LinkedIn Join WhatsApp Channel
Scroll to Top