CSS Backgrounds: Colors, Images and Gradients

CSS backgrounds can be solid colors, images or gradients. Learn background-image, background-size, position, repeat, gradients, and the background shorthand.

Adding a background image

The background-image property puts an image behind the content of an element. The image path goes inside url().

.banner {
  background-image: url("images/beach.jpg");
  height: 300px;
}

The image fills the .banner element. The path works like href in a link: it is relative to the CSS file. If your CSS is in a css folder and the image is in an images folder next to it, write url("../images/beach.jpg").

A background image is for decoration only. If the image is part of the content, like a product photo, use an HTML <img> tag with alt text instead. Screen readers cannot describe background images.

background-size: cover and contain

Images rarely match the exact size of your box. background-size controls how the image is scaled.

• cover makes the image fill the whole box. Some edges may be cut off, but there are no empty gaps. This is the most common choice.
• contain makes the whole image visible inside the box. There may be empty space around it.
• You can also use exact sizes, like 200px or 50%.

background-position and background-repeat

By default, a small background image repeats like floor tiles to fill the space. You usually want to turn that off.

.logo-box {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 150px;
}

The logo appears once, centered, and fully visible inside the box. background-position accepts words like center, top, bottom left, or values like 50% 20%. Other repeat options are repeat-x (only across) and repeat-y (only down).

CSS gradients: linear and radial

A gradient is a smooth change from one color to another. In CSS, gradients count as background images, so you use them with background-image (or background).

<div class="linear-box"></div>
<div class="radial-box"></div>

.linear-box {
  background-image: linear-gradient(to right, #ff9a8b, #ff6a88);
  height: 150px;
}

.radial-box {
  background-image: radial-gradient(circle, #fff7ad, #ffa9f9);
  height: 150px;
}

The first box fades from peach on the left to pink on the right. The second box has a soft yellow center that spreads out into pink, like light from a lamp.

For a linear gradient you can choose the direction with words (to right, to bottom, to top left) or an angle like 45deg. You can add more than two colors too: linear-gradient(90deg, red, orange, yellow).

The background shorthand

The background shorthand lets you write several background properties in one line. A shorthand is a short way to set many properties at once.

.card {
  background: #f0f4f8 url("images/pattern.png") no-repeat center / cover;
}

This sets the color, image, repeat, position and size together. Note the / between position and size; it is required when you include a size.

Common mistake: Writing background: red; after background-image: url(...). The shorthand resets every background property, so your image disappears. Put the shorthand first, then any single properties after it.

Example: a hero banner with a background image

A hero banner is the big image section at the top of many homepages. Here's a complete one.

<section class="hero">
  <h1>Explore the Mountains</h1>
  <p>Guided hiking trips for every level.</p>
</section>

.hero {
  background-image:
    linear-gradient(rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.5)),
    url("images/mountains.jpg");
  background-size: cover;
  background-position: center;
  background-color: #2d3e50;
  color: white;
  text-align: center;
  padding: 120px 20px;
}

You will see a full-width photo of mountains with white text centered on top. The trick is the first layer: a gradient from 50% black to 50% black, which creates a dark see-through layer over the photo. It makes the white text much easier to read. You can stack several backgrounds by separating them with commas; the first one is on top.

Tip: Always add a background-color along with a background image. If the image is slow or fails to load, the text will still be readable on the color.

Practice exercise

Build a "Summer Sale" banner. Give it a linear gradient from orange to pink at a 135deg angle, white text, and padding. Then make a second version that uses a photo with background-size: cover and a dark overlay.

Hint: start with background-image: linear-gradient(135deg, orange, hotpink);. Any image from your computer will work for the second version; put it in the same folder as your files.

Key takeaways

• background-image: url("...") adds an image behind an element's content.
• background-size: cover fills the box; contain shows the whole image.
• Use background-repeat: no-repeat and background-position: center to control placement.
• linear-gradient() and radial-gradient() create smooth color changes with no image file.
• A dark gradient layer over a photo makes text on top readable.