CSS Background
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
HTML
<style>
.box {
background-color: #f5f5f5;
}
.highlight {
background-color: rgba(255, 255, 0, 0.3);
}
</style>
<div class="box">Box element showing background color</div>
<div class="highlight">This text has highlighted background</div>
2. Background Image
background-image sets a background image for elements:
Example
HTML
<style>
.banner {
background-image: url("/assets/images/tutorials/css-banner.jpg");
height: 200px;
background-size: cover;
background-position: center;
}
</style>
<div class="banner">Banner content display area</div>
Multiple background images can be set, separated by commas, with earlier ones on top:
Example
HTML
<style>
.multi-bg {
background-image: url("/assets/images/tutorials/css-star.png"), url("/assets/images/tutorials/css-bg.jpg");
height: 200px;
background-size: 50px, cover;
background-repeat: no-repeat, repeat;
background-position: center, top left;
}
</style>
<div class="multi-bg">Multi-background overlay effect</div>
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
HTML
<style>
.no-repeat {
background-image: url("/assets/images/tutorials/css-star.png");
background-repeat: no-repeat;
background-color: #f0f0f0;
height: 100px;
}
.repeat-x {
background-image: url("/assets/images/tutorials/css-star.png");
background-repeat: repeat-x;
background-color: #e3f2fd;
height: 100px;
}
</style>
<div class="no-repeat">No repeat (single image)</div>
<div class="repeat-x">Repeat horizontally</div>
4. Background Size
Controls background image dimensions:
Example
HTML
<style>
.cover {
background-image: url("/assets/images/tutorials/css-banner.jpg");
background-size: cover;
background-position: center;
height: 200px;
}
.contain {
background-image: url("/assets/images/tutorials/css-banner.jpg");
background-size: contain;
background-repeat: no-repeat;
height: 200px;
}
</style>
<div class="cover">Cover: fills container, may crop</div>
<div class="contain">Contain: shows complete image, may leave whitespace</div>
- cover: 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
HTML
<style>
.center {
background-image: url("/assets/images/tutorials/css-star.png");
background-repeat: no-repeat;
background-position: center;
background-color: #f5f5f5;
height: 100px;
}
.top-right {
background-image: url("/assets/images/tutorials/css-star.png");
background-repeat: no-repeat;
background-position: top right;
background-color: #e3f2fd;
height: 100px;
}
</style>
<div class="center">Centered background</div>
<div class="top-right">Top-right background</div>
6. Background Shorthand
The background shorthand combines all background properties:
Example
HTML
<style>
.shorthand {
background: #333 url("/assets/images/tutorials/css-banner.jpg") no-repeat center/cover;
height: 200px;
color: white;
}
</style>
<div class="shorthand">Shorthand background with color, image, repeat, position, and size</div>
❓ 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.