CSS: CSS Background
Last updated: 2026-10-13
Background styling is an important tool for beautifying web pages. CSS provides a series of background properties that let you control element background colors, background images, image repetition, size, and position.
Background Properties Quick Reference
| Property | Common Values | Purpose |
|---|---|---|
background-color |
#f5f5f5, red, rgba(255,0,0,0.3) |
Background color |
background-image |
url("bg.jpg"), linear-gradient(...) |
Background image or gradient |
background-repeat |
no-repeat, repeat, repeat-x, repeat-y |
Background repeat method |
background-position |
center, top left, 50% 50% |
Background image position |
background-size |
cover, contain, 100% auto |
Background image size |
background-attachment |
scroll, fixed, local |
Whether background scrolls with page |
background |
#333 url("bg.jpg") no-repeat center |
Shorthand, combines multiple |
1. Background Color
background-color sets the element's background color, supporting any valid color value:
▶ Example
▶ Try it Yourself2. Background Image
background-image sets a background image for elements:
▶ Example
▶ Try it YourselfMultiple background images can be set, separated by commas, with earlier ones on top:
▶ Example
▶ Try it Yourself(1) Background Image vs <img> Tag
- Background image: Suitable for decorative images, doesn't affect content semantics
<img>tag: Suitable for content-meaningful images (product photos, article illustrations), SEO and accessibility friendly
3. Background Repeat
Controls whether background images repeat/tile:
▶ Example
▶ Try it Yourself4. Background Size
Controls background image dimensions:
▶ Example
▶ Try it Yourselfcover: Fills container maintaining aspect ratio, excess cropped (most common)contain: Shows complete image maintaining aspect ratio, may have whitespace
5. Background Position
Controls background image position within element:
▶ Example
▶ Try it Yourself6. Background Shorthand
The background shorthand combines all background properties:
▶ Example
▶ Try it Yourself❓ FAQ
Q What's the difference between
background-size: cover and contain?A
cover fills the entire container maintaining aspect ratio, cropping excess parts. contain shows the complete image within the container, may leave whitespace. Use cover for full-bleed backgrounds, contain when you need to show the entire image.Q Can I use multiple background images?
A Yes! Separate multiple backgrounds with commas. Earlier ones appear on top. Example:
background: url("overlay.png"), url("bg.jpg");. Often combined with gradients for overlay effects.Q What's the difference between
background-attachment: fixed and scroll?A
fixed keeps the background stationary when scrolling (parallax effect), scroll moves with the page (default). Fixed creates depth perception but may affect mobile performance.📖 Summary
- CSS background properties are rich — you can set solid colors, image backgrounds, control repetition, size, position, and scroll behavior
background-size: cover+background-position: centeris the most common combination for responsive backgrounds- Use multiple backgrounds with commas for overlay effects
- Background shorthand combines all properties in one declaration
📝 Exercises
- Create a full-width banner using
backgroundshorthand with centered, non-repeating image. - Create a parallax effect using
background-attachment: fixedwith at least two sections. - Create a multi-background overlay: gradient mask + base image on the same element.
