Backgrounds in CSS
? CSS Backgrounds – Complete Guide
The background property in CSS lets you control the background color, image, position, size, repeat, and more of elements. You can apply one or multiple backgrounds to any HTML element.
? Common Background Properties
| Property | Description |
|---|---|
background-color | Sets the background color. |
background-image | Sets one or more background images. |
background-repeat | Controls if/how a background image repeats. |
background-position | Sets the starting position of the background image. |
background-size | Defines the size of the background image. |
background-attachment | Sets whether the background scrolls with the page. |
background-clip | Defines the painting area (border-box, padding-box, content-box). |
background-origin | Defines the origin position for the background. |
background | Shorthand for all the above. |
? 1. Background Color
body { background-color: lightblue;}?? 2. Background Image
div { background-image: url("bg.jpg");}? 3. Background Repeat
div { background-repeat: no-repeat; /* or repeat-x, repeat-y */}? 4. Background Position
div { background-position: center center; /* or top left, 50% 100%, etc. */}? 5. Background Size
div { background-size: cover; /* cover entire area */ background-size: contain; /* fit without cropping */}? 6. Background Attachment
div { background-attachment: fixed; /* background stays fixed while scrolling */}? 7. Background Shorthand
div { background: url("bg.jpg") no-repeat center/cover lightgray;}Format:
background: [color] [image] [repeat] [position]/[size] [attachment];? Tips:
You can stack multiple backgrounds:
background-image: url("stars.png"), url("sky.jpg");background-position: center, top;background-repeat: no-repeat, repeat;Combine with gradients:
background: linear-gradient(to bottom, #fff, #ccc);
Want to see examples with gradients, parallax scrolling, or multiple backgrounds?
