CSS Backgrounds

Backgrounds are one of the most visible things CSS controls: the color or image sitting behind an element's content. A simple background-color can completely change the mood of a section, and a background-image can turn a plain box into a banner or hero section. CSS gives you fine control over background images too: whether they repeat, where they're positioned, and how large they're displayed. There's also a shorthand background property that lets you set several of these at once in a single line. Backgrounds show up constantly on a real site like cookiescursor.com, from subtle card backgrounds to full-width promotional banners.

In this page:

background-color
background-image
background-repeat and background-position
background-size
Shorthand background Property

background-color

The background-color property fills the space behind an element's content with a solid color, using any of the color formats CSS supports. This is one of the most frequently used CSS properties, forming the base layer beneath any background image.

Note: A subtle, light background-color is an easy way to visually separate one section of a page from another.

Warning: A background-color with poor contrast against the text sitting on top of it can make that content hard to read.

Example: background-color

css

<style>
.box {
  background-color: lightblue;
}
</style>
<div class="box">Filled with a solid background color</div>

background-image

The background-image property places an image behind an element's content, referenced with url(). It can be combined with a background-color as a fallback while the image loads.

Note: Always set a background-color close to your image's dominant color, so the layout still looks reasonable if the image fails to load.

Warning: A background-image with no repeat or size settings can behave unpredictably, tiling or clipping in ways you might not expect.

Example: background-image

css

<style>
.box {
  background-color: #ddd;
  background-image: url('https://placehold.co/300x150');
}
</style>
<div class="box">Image with a fallback color behind it</div>

background-repeat and background-position

By default, a background image tiles to fill its element. background-repeat controls whether it tiles at all, and background-position controls exactly where the image starts. Getting these two properties wrong is a common cause of a background image looking stretched, cut off, or misaligned.

Note: Set background-repeat: no-repeat whenever you want a single, clean image instead of a tiled pattern.

Warning: Positioning values like center only make visual sense once repeat is turned off; otherwise the tiling can hide the effect of positioning entirely.

Example: background-repeat and background-position

css

<style>
.box {
  background-image: url('https://placehold.co/50x50');
  background-repeat: no-repeat;
  background-position: center;
  height: 150px;
}
</style>
<div class="box">Single centered image, no tiling</div>

background-size

background-size controls how large a background image renders. Special keywords like cover scale the image to fill its element completely, while contain scales it to fit fully inside without cropping.

Note: Use background-size: cover for full-width hero banners, it fills the space nicely regardless of the container's exact dimensions.

Warning: background-size: cover can crop parts of an image to make it fit, so double check important content isn't accidentally cut off.

Example: background-size

css

<style>
.box {
  background-image: url('https://placehold.co/300x150');
  background-size: cover;
  height: 150px;
}
</style>
<div class="box">Fills the element completely</div>

Shorthand background Property

The background shorthand property lets you set color, image, repeat, position, and size all in one declaration, instead of writing five separate properties. Using the shorthand can accidentally reset properties you didn't explicitly include, so it's worth double-checking the full value list.

Note: Once you're comfortable with the individual background properties, the shorthand version keeps your CSS shorter without losing clarity.

Warning: Any property left out of the shorthand resets to its default value, which can accidentally undo a setting from elsewhere in your CSS.

Example: Shorthand background Property

css

<style>
.box {
  background: #ddd url('https://placehold.co/300x150') no-repeat center / cover;
  height: 150px;
}
</style>
<div class="box">Five properties in one declaration</div>

Common Mistakes

Forgetting to set a fallback background-color when using a background-image, in case the image fails to load.
Not setting background-size, which can leave a background image far too large or oddly cropped.
Overusing background-repeat when a single, well-positioned image would look cleaner.

Chapter Summary

background-color sets a solid color behind an element's content.
background-image, background-repeat, background-position, and background-size control how an image background behaves.
The background shorthand property can combine several of these settings into a single declaration.

Browser Support

All standard CSS background properties covered here are supported by every modern browser.

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Color Keywords Next Lesson → CSS Background Color