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 */

📋 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

Frequently Asked Questions

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.