← Back to CSS Course | Chapter 2: Colors & Backgrounds | Lesson 6 of 21

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:

  1. background-color
  2. background-image
  3. background-repeat and background-position
  4. background-size
  5. Shorthand background Property
Syntax
css 
selector {
  background-color: color;
  background-image: url("image.jpg");
  background-repeat: repeat | no-repeat;
}

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.
  • Accepted values:
  • color — any CSS color: name, hex, rgb(), hsl()
  • transparent — no color (initial value)
  • currentcolor — the element's text color
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • url("...") — an image file
  • none — no image (initial value)
  • linear-gradient() — a straight-line color gradient
  • radial-gradient() — a circular or elliptical gradient
  • conic-gradient() — a gradient swept around a center point
  • several values separated by commas — stacked layers
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • repeat | no-repeat | repeat-x | repeat-y | space | round — tiling for background-repeat
  • left / center / right — horizontal position keywords
  • top / center / bottom — vertical position keywords
  • length — offset from the top-left, e.g. 20px 10px
  • percentage — 50% 50% centers the image
  • edge offsets — e.g. right 10px bottom 20px
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • auto — the image's natural size (initial value)
  • cover — scales to fill the box, may crop
  • contain — scales to fit fully inside, may leave gaps
  • length — e.g. 200px or 10rem
  • percentage — relative to the background positioning area
  • two values — width then height, e.g. 50% auto
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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.
  • Accepted values:
  • color — e.g. #eee
  • image — url() or a gradient
  • position / size — e.g. center / cover
  • repeat — e.g. no-repeat
  • attachment — scroll, fixed or local
  • origin and clip — border-box, padding-box or content-box
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property
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>
Live Example
Related Topics

CSS Color Keywords · CSS HSL Colors · CSS HEX Colors · CSS RGB Colors

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Forgetting to set a fallback background-color when using a background-image, in case the image fails to load.
  2. Not setting background-size, which can leave a background image far too large or oddly cropped.
  3. 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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.