CSS: Backgrounds & Images

Control every aspect of backgrounds and image presentation.

background-color

background-color fills the content and padding area of an element with a solid color. It accepts any CSS color value.

`background-color`

background-color fills the element's background with a solid color. It sits behind background-image when both are set.

Accepts any CSS color: named, hex, rgb(), hsl()
transparent, the default value; no background color
Always pair a background-color with text to ensure readable contrast
background-color shows through if background-image fails to load

background-color

Named, hex, and hsl color values for backgrounds.

div {
  padding: 14px;
  margin-bottom: 8px;
  border-radius: 4px;
  font-weight: bold;
}

.box-a { background-color: steelblue;      color: white; }
.box-b { background-color: #2ecc71;        color: white; }
.box-c { background-color: hsl(0,70%,55%); color: white; }

background-image

background-image sets an image or gradient as the background. It accepts a url() for image files or gradient functions like linear-gradient().

`background-image`

background-image layers on top of background-color. If the image fails to load, the background-color shows as a fallback.

url('image.jpg'), loads an image file as the background
linear-gradient(), generates a color gradient as the background
none, removes any background image
Always set a background-color alongside background-image as a fallback

background-image

Gradient as background-image; background-color as fallback.

.gradient-box {
  background-image: linear-gradient(to right, steelblue, mediumslateblue);
  color: white;
  padding: 20px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.color-fallback {
  background-color: steelblue;
  background-image: url('photo.jpg'); /* color shows if image fails */
  color: white;
  padding: 20px;
  border-radius: 6px;
}

background-repeat

By default, background images tile to fill the element. background-repeat controls whether and how tiling happens.

`background-repeat`

background images tile in both directions by default. Use no-repeat for photos and hero images; repeat for patterns and textures.

repeat, tiles in both directions (default)
no-repeat, shows the image only once
repeat-x, tiles only horizontally
repeat-y, tiles only vertically
space, tiles without clipping, adding space between copies

background-repeat

no-repeat shows the image once; repeat-x tiles it horizontally.

div {
  height: 80px;
  background-image: url('https://via.placeholder.com/40');
  background-color: #f0f8ff;
  margin-bottom: 8px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

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

background-position

background-position sets where the background image is placed within the element. Used together with no-repeat to control the focal point of the image.

`background-position`

background-position takes keywords, percentages, or pixel values. Two values set horizontal and vertical position respectively.

center, centers the image both horizontally and vertically
top right, places image at the top-right corner
50% 50%, same as center using percentages
20px 10px, 20px from left, 10px from top
Combined with background-size: cover for hero sections: center the image and crop equally

background-position

Top-left, center, and bottom-right positioning.

div {
  height: 100px;
  background-image: url('https://via.placeholder.com/60x40/3498db/fff');
  background-repeat: no-repeat;
  background-color: #f0f4f8;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px;
  font-size: 13px;
}

.box-top    { background-position: top left; }
.box-center { background-position: center; }
.box-bottom { background-position: bottom right; }

background-size

background-size controls how large the background image is rendered inside the element.

`background-size`

cover and contain are the two most useful values. cover fills the box completely (may crop); contain fits the whole image inside (may leave gaps).

cover, scales image to fill the container; may crop edges
contain, scales image to fit fully inside the container; may leave empty space
auto, default; displays image at its natural size
200px 100px, explicit width and height
50%, relative to the container size

background-size: cover vs contain

cover crops to fill; contain fits the whole image.

div {
  height: 120px;
  background-image: url('https://picsum.photos/300/150');
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 8px;
  border: 2px solid #ccc;
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

.cover-box   { background-size: cover; }
.contain-box { background-size: contain; background-color: #e2e8f0; }

background-attachment

background-attachment controls whether the background image scrolls with the page or stays fixed to the viewport.

`background-attachment`

fixed creates a parallax-like effect where the background stays in place while the page content scrolls over it.

scroll, default; background moves with the element when the page scrolls
fixed, background is fixed to the viewport; content scrolls over it
local, background scrolls with the element's own scroll, not the page
background-attachment: fixed is a simple way to create a parallax hero effect
fixed may have performance issues on mobile, use scroll as a fallback

background-attachment: fixed

Background stays fixed to the viewport while content scrolls.

.parallax-hero {
  background-image: linear-gradient(135deg, steelblue, mediumslateblue);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

Multiple Backgrounds

CSS allows multiple background layers on a single element by separating values with commas. The first layer listed is on top; the last is at the bottom.

`Multiple Backgrounds`

Multiple backgrounds are comma-separated. Each layer can have its own image, position, size, and repeat. The last background-color (set separately) is always the bottommost layer.

Layers are stacked: first value in the list = topmost layer
Each layer can have independent position, size, and repeat settings
background-color is always the bottom-most layer regardless of order
Useful for overlaying gradients on top of images

Multiple Backgrounds

A dark gradient overlay layered on top of a repeating pattern.

.multi-bg {
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.1)),
    linear-gradient(45deg, #667eea 25%, transparent 25%),
    linear-gradient(-45deg, #764ba2 25%, transparent 25%);
  background-size: auto, 20px 20px, 20px 20px;
  background-color: #764ba2;
  color: white;
  padding: 30px 20px;
  text-align: center;
  font-weight: bold;
  border-radius: 6px;
}

Linear Gradients

linear-gradient() creates a smooth transition between two or more colors along a straight line.

`linear-gradient()`

The first argument is the direction (to right, to bottom, or an angle like 135deg). The remaining arguments are color stops.

to right, left to right; same as 90deg
to bottom, top to bottom; the default direction
135deg, diagonal angle
Color stops, two or more colors; optional percentage positions
repeating-linear-gradient(), repeats the gradient pattern to fill the element

linear-gradient()

Horizontal, diagonal, and multi-stop linear gradients.

div {
  padding: 16px;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  margin-bottom: 8px;
}

.g1 { background: linear-gradient(to right, #3498db, #2ecc71); }
.g2 { background: linear-gradient(135deg, #e74c3c, #9b59b6); }
.g3 { background: linear-gradient(to right, #f39c12, #e74c3c, #9b59b6); }

Radial Gradients

radial-gradient() creates a gradient that radiates outward from a center point in a circular or elliptical shape.

`radial-gradient()`

radial-gradient() starts from a center point and spreads outward. The shape can be circle or ellipse, and you can set the center position.

circle, perfectly round gradient
ellipse, default; stretches to fit the element
at center, sets the gradient origin position
closest-side / farthest-corner, keywords controlling how far the gradient extends
repeating-radial-gradient(), repeats the pattern outward

radial-gradient()

Ellipse and circle radial gradients with different origins.

div {
  padding: 30px 16px;
  color: white;
  font-weight: bold;
  border-radius: 6px;
  margin-bottom: 8px;
  text-align: center;
}

.r1 { background: radial-gradient(ellipse, #3498db, #1a1a2e); }
.r2 { background: radial-gradient(circle at top left, #f39c12, #e74c3c, #1a1a2e); }

Images: object-fit and object-position

When an <img> has a fixed width and height, object-fit controls how the image fills that space, just like background-size does for background images.

`object-fit / object-position`

object-fit is the inline image equivalent of background-size. object-position moves the image within its box, like background-position.

cover, fills the box, may crop; maintains aspect ratio
contain, fits fully inside the box; may leave empty space
fill, stretches to fill the box; distorts aspect ratio
none, displays at natural size; may overflow or leave gaps
object-position: top, shifts which part of the image is visible inside the box

object-fit

cover fills the fixed box; contain fits the whole image inside.

img {
  width: 200px;
  height: 120px;
  border: 2px solid #ccc;
  border-radius: 6px;
  margin-right: 12px;
}

.cover-img   { object-fit: cover;   object-position: center; }
.contain-img { object-fit: contain; background: #f0f4f8; }

Responsive Images (max-width: 100%)

By default, images display at their natural size and can overflow their container on small screens. One CSS rule makes any image fully responsive.

`Responsive Images`

Setting max-width: 100% ensures images never exceed their container width. Combined with height: auto, the image scales proportionally.

max-width: 100%, image shrinks to fit its container but never grows beyond natural size
height: auto, maintains the aspect ratio as width changes
width: 100%, forces the image to always fill the full container width
Add these rules to img in your CSS reset to make all images responsive by default
Use width: 100% for images that should always fill their column; max-width: 100% for images that should only shrink

Responsive Image

max-width: 100% prevents the image from overflowing its container.

.container {
  width: 100%;
  max-width: 500px;
  border: 2px solid #ccc;
  border-radius: 6px;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

aspect-ratio for Images

aspect-ratio locks the width-to-height ratio of an element. When one dimension is set, the other is calculated automatically, perfect for image placeholders and media embeds.

`aspect-ratio`

aspect-ratio prevents layout shift by reserving space for images before they load. It also ensures consistent image sizes in a grid without hardcoding heights.

aspect-ratio: 16 / 9, widescreen video ratio
aspect-ratio: 1, square (same as 1 / 1)
aspect-ratio: 4 / 3, traditional photo ratio
Set width and aspect-ratio, height is computed automatically
Combine with object-fit: cover for uniform image cards in a grid

aspect-ratio

All images share the same 4/3 ratio regardless of their natural dimensions.

.card-grid {
  display: flex;
  gap: 8px;
}

.card-grid img {
  width: 100%;
  max-width: 160px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
}

Knowledge Check

1. Which background-size value scales the image to fully cover the container, possibly cropping it?

2. What does background-repeat: no-repeat do?

3. Which CSS property controls how an <img> fills its container similar to background-size: cover?

4. What does background-attachment: fixed do?

5. Which CSS property maintains an element's width-to-height ratio automatically?

Previous Next