CSS Backgrounds – Colors, Images, Gradients & More

background-color

The simplest background property. Accepts any CSS color value.

CSS

body { background-color: #f5f7fa; }
.card { background-color: white; }
.hero { background-color: #1572B6; }
.badge { background-color: rgba(21, 114, 182, 0.1); }
.overlay { background-color: rgba(0, 0, 0, 0.5); }  /* dark overlay */
nav { background-color: transparent; }               /* see-through */

background-color: #1572B6

background-image

Loads an image as the element's background. Images are layered on top of background-color.

CSS

/* URL to an image file */
.hero {
  background-image: url('/images/hero.jpg');
  background-color: #1572B6;  /* fallback if image fails to load */
}

/* The image appears OVER the background-color */
/* So background-color shows through transparent parts of the image */

/* No image */
.reset { background-image: none; }

background-size

CSS

/* cover — scale image to COVER the entire element (may crop) */
/* Most common for hero images */
.hero {
  background-image: url('/images/hero.jpg');
  background-size: cover;
}

/* contain — scale image to FIT inside the element (may leave gaps) */
.logo-bg {
  background-image: url('/images/logo.png');
  background-size: contain;
}

/* Exact dimensions */
background-size: 200px 150px;  /* width height */
background-size: 50% auto;     /* 50% wide, proportional height */
background-size: auto;         /* original image size (default) */

background-position

CSS

/* Keywords */
background-position: center;        /* centered both axes */
background-position: top;
background-position: bottom right;
background-position: center top;

/* Percentages */
background-position: 50% 50%;      /* same as center */
background-position: 0% 0%;        /* top left */
background-position: 100% 100%;    /* bottom right */

/* Pixels — from top-left corner */
background-position: 20px 40px;    /* 20px from left, 40px from top */

/* Offset from a specific edge */
background-position: right 20px bottom 30px;   /* 20px from right, 30px from bottom */

background-repeat

CSS

background-repeat: repeat;      /* default — tile in both directions */
background-repeat: no-repeat;   /* show once — most common for hero images */
background-repeat: repeat-x;    /* tile horizontally only */
background-repeat: repeat-y;    /* tile vertically only */
background-repeat: space;       /* tile with equal spacing, no clipping */
background-repeat: round;       /* tile and scale to avoid clipping */

background-attachment

CSS

/* scroll — background scrolls with the page (default) */
background-attachment: scroll;

/* fixed — background stays fixed while page scrolls (parallax effect) */
.parallax-section {
  background-image: url('/images/mountains.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* local — background scrolls with the element's own scroll */
background-attachment: local;

CSS Gradients

CSS gradients are generated images — no image file needed. They work anywhere background-image accepts a value.

linear-gradient()

CSS – linear-gradient

/* Direction + color stops */
background-image: linear-gradient(to right, #1572B6, #21a0f5);
background-image: linear-gradient(to bottom, #1572B6, #0d5fa0);
background-image: linear-gradient(135deg, #1572B6, #FFD43B);

/* Multiple color stops */
background-image: linear-gradient(
  to right,
  #1572B6 0%,
  #21a0f5 50%,
  #1572B6 100%
);

/* Angle in degrees */
background-image: linear-gradient(45deg, navy, royalblue);

/* Hard stop — no blend (striped effect) */
background-image: linear-gradient(
  to right,
  #1572B6 50%,
  #FFD43B 50%
);

linear-gradient(135deg, #1572B6, #FFD43B)

radial-gradient()

CSS – radial-gradient

/* Ellipse (default) from center */
background-image: radial-gradient(#1572B6, #0a3a5c);

/* Circle shape */
background-image: radial-gradient(circle, #1572B6, #0a3a5c);

/* Positioned gradient */
background-image: radial-gradient(circle at top left, #FFD43B, transparent);

/* Multiple stops — spotlight effect */
background-image: radial-gradient(
  circle at 30% 40%,
  rgba(255,255,255,0.15) 0%,
  transparent 60%
);

radial-gradient spotlight

conic-gradient()

CSS – conic-gradient (pie chart)

/* Rotates around a center point — great for pie charts */
background-image: conic-gradient(#1572B6 40%, #FFD43B 40% 70%, #e63946 70%);

/* Pie chart: 40% blue, 30% yellow, 30% red */
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #1572B6 0deg 144deg,
    #FFD43B 144deg 252deg,
    #e63946 252deg 360deg
  );
}

Multiple Backgrounds

CSS allows stacking multiple backgrounds on one element, separated by commas. First value is the topmost layer.

CSS – Multiple backgrounds

.hero {
  /* Layer 1 (top): dark overlay for text readability */
  /* Layer 2 (bottom): background image */
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

gradient overlay on top of image

Background Shorthand

Combine all background properties in one declaration:

CSS – background shorthand

/* background: color image position/size repeat attachment */
.hero {
  background: #1572B6 url('/images/hero.jpg') center/cover no-repeat fixed;
}

/* Gradient shorthand */
.section {
  background: linear-gradient(135deg, #1572B6, #0a3a5c) no-repeat center/cover;
}

/* Solid color only */
.card { background: white; }

/* Note: shorthand resets all background properties not listed */

Backgrounds: Shorthand, cover vs contain, and Layers

The background shorthand packs color, image, position, size, and repeat into one line. The two properties people most often get wrong are background-size and positioning.

.hero {
  background: url("bg.jpg") center / cover no-repeat #222;
  /*          image         position / size   repeat   fallback color */
}

`background-size`	Effect
`cover`	fill the box, cropping overflow — no gaps
`contain`	fit the whole image inside — may leave gaps
`100% 100%`	stretch to fit (distorts)

cover vs contain: cover guarantees no empty space (great for hero images) but crops edges; contain shows the entire image but may letterbox. Pair either with background-position: center so cropping stays balanced.

Multiple backgrounds and gradients

/* layers stack front-to-back; a gradient counts as an image */
.card {
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),   /* dark overlay on top */
    url("photo.jpg") center / cover;                    /* photo behind */
}

Comma-separated backgrounds layer with the first listed on top — the standard trick for darkening a photo so white text stays readable. Note a background image is decorative and not read by screen readers; use <img> with alt for meaningful pictures.

🏋️ Practical Exercise

Set a solid background-color.
Add a background-image with a URL.
Control tiling with background-repeat.
Position and size with background-position and background-size.
Create a linear-gradient background.

🔥 Challenge Exercise

Build a hero banner with a background image that covers the area (background-size: cover), is centered, does not repeat, and has a semi-transparent gradient overlay for text readability. Explain the difference between cover and contain.

📋 Summary

background-color — any CSS color. Always set a fallback when using images.
background-image — url() for images, or gradient functions. Sits above background-color.
background-size — cover fills element (may crop), contain fits inside (may gap).
background-position — keywords (center, top right), percentages, or pixels.
background-repeat — no-repeat most common for hero images.
linear-gradient() — directional color blend. No image file required.
radial-gradient() — circular/elliptical blend from a center point.
Multiple backgrounds — comma-separate values; first = topmost layer.
Shorthand — background: color image position/size repeat

Interview Questions

What background properties can you set in CSS?
What is the difference between background-size: cover and contain?
How do you stop a background image from repeating?
How do you create a gradient without an image?
How do you layer multiple backgrounds on one element?

FAQ

What is the difference between background-size: cover and contain? +

cover scales the image large enough to fill the entire element — the image may be cropped on the sides or top/bottom. contain scales the image to fit entirely inside the element — the image will always be fully visible, but there may be empty space (letterboxing) if the aspect ratios don't match. Use cover for hero/banner images. Use contain for logos and icons that must show in full.

How do I make text readable on a background image? +

Stack a semi-transparent overlay as the top background layer: background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('hero.jpg'). This darkens the image uniformly and makes white text readable. Alternatively, use a gradient overlay that is darker at the bottom: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.7)) — ideal for image captions.

Are CSS gradients better than gradient images? +

Yes — CSS gradients are always better than gradient image files. They are: scalable to any size without pixelation, much smaller file size (no HTTP request), fully editable in code, and animatable with CSS transitions. Use CSS gradients for all gradient backgrounds. Only use image files when the gradient has artistic complexity that CSS cannot reproduce.

How do I create a full-page background image? +

Apply to body or a wrapper: background: url('bg.jpg') center/cover no-repeat fixed. The fixed attachment makes the image stay fixed as you scroll. Also ensure min-height: 100vh on the element if it might not fill the viewport. Make sure the image is properly compressed (WebP format is recommended for photos) — a full-page image should be under 300KB.