CSS Backgrounds
CSS backgrounds control how elements look behind their content. Learn all 7 background properties — color, image, repeat, position, size, attachment, and shorthand — with visual demos and code examples.
- What are Backgrounds?
- 7 Properties
- background-color
- background-image
- background-repeat
- background-position
- background-size
- background-attachment
- Shorthand Property
- Complete Example
- Try It Yourself
- FAQ
What are CSS Backgrounds?
CSS Backgrounds are used to control the background appearance of HTML elements — such as pages, sections, divs, or any box. You can set colors, images, positions, sizes, and repeating behavior for backgrounds. Used well, backgrounds transform plain pages into visually rich layouts.
7 CSS Background Properties
CSS provides 7 dedicated background properties — each controlling a different aspect of how a background looks:
1. background-color
background-color — Set Background Colour
This property sets the background colour of an element. It accepts any valid CSS color — color names, HEX codes, RGB, RGBA, HSL, or HSLA values. It applies to the entire element area including padding, but not the border.
/* Entire page background */ body { background-color: lightblue; } /* Using HEX or RGBA */ .card { background-color: #7c3aed; } .overlay { background-color: rgba(0, 0, 0, 0.5); }
2. background-image
background-image — Add a Background Image
This property adds an image as the background of an element. The image path is specified using the url() function. By default, the image tiles to fill the entire element area. You can also use CSS gradients as background images.
/* Image from file */ body { background-image: url("image.jpg"); } /* CSS gradient as background */ header { background-image: linear-gradient(135deg, #2563eb, #7c3aed); }
3. background-repeat
background-repeat — Control Image Tiling
By default, background images tile automatically in both directions. The background-repeat property lets you control this behaviour — repeat in one direction, or stop it entirely.
| Value | Description |
|---|---|
| repeat | Image repeats both horizontally and vertically (default) |
| repeat-x | Image repeats horizontally only |
| repeat-y | Image repeats vertically only |
| no-repeat | Image appears only once — no tiling |
| space | Images tiled with equal space between them |
| round | Images tiled and scaled to fill without clipping |
/* Show image once only */ body { background-image: url("hero.jpg"); background-repeat: no-repeat; } /* Repeat horizontally only */ header { background-repeat: repeat-x; }
4. background-position
background-position — Set Image Placement
This property sets the starting position of the background image within the element. Most commonly used with background-repeat: no-repeat to place a single image exactly where you want it.
| Value | Meaning |
|---|---|
| top left | Top left corner (default) |
| top right | Top right corner |
| center | Centre of the element |
| bottom left | Bottom left corner |
| bottom right | Bottom right corner |
| 50% 50% | Centre using percentages |
| 100px 50px | Exact pixel position |
body { background-image: url("image.jpg"); background-position: center; background-repeat: no-repeat; }
5. background-size
background-size — Control Image Size
This property controls how large the background image is displayed. The cover value is most popular — it scales the image to cover the entire element while maintaining aspect ratio, with possible cropping.
| Value | Meaning |
|---|---|
| cover | Scales image to cover entire element — may crop edges |
| contain | Scales image to fit fully inside — may leave gaps |
| auto | Image displayed at its natural size (default) |
| 300px 200px | Exact width and height in pixels |
| 100% 100% | Stretch to fill element — may distort |
/* Cover — most common for hero sections */ body { background-size: cover; } /* Contain — show full image */ div { background-size: contain; }
6. background-attachment
background-attachment — Fixed or Scrolling
This property controls whether the background image scrolls with the page or stays fixed. The fixed value creates the popular "parallax" effect where the background stays still while content scrolls over it.
| Value | Meaning |
|---|---|
| scroll | Background scrolls with the page (default) |
| fixed | Background stays fixed — creates parallax effect |
| local | Background scrolls with the element's own content |
/* Fixed background — parallax effect */ body { background-attachment: fixed; }
7. background (Shorthand Property)
background — Write All Properties in One Line
Instead of writing separate properties, you can combine them all into one background declaration. The shorthand order is: color image repeat position / size attachment.
/* Shorthand: color image repeat position */ body { background: lightblue url("image.jpg") no-repeat center; } /* Full shorthand with size and attachment */ body { background: #0f172a url("image.jpg") no-repeat center / cover fixed; }
Complete CSS Background Example
Here is a full HTML page showing all background properties working together:
<!DOCTYPE html> <html lang="en"> <head> <style> body { background-color: lightgray; background-image: url("bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; } </style> </head> <body> <h1>Welcome to My Website</h1> </body> </html>
Welcome to My Website
Try It Yourself
Questions About CSS Backgrounds
The questions beginners most often ask when learning backgrounds: