Background Properties
| Property | Possible Values | Description |
|---|---|---|
background-color | color-name, hex, rgb, rgba | Sets the background color of an element |
background-image | url('image.jpg'), none | Sets an image as the background |
background-position | left, right, center, px, % | Defines the position of the background image |
background-size | auto, cover, contain, px, % | Defines the size of the background image |
background-repeat | repeat, no-repeat, repeat-x, repeat-y | Controls how the background image repeats |
background-attachment | scroll, fixed, local | Specifies whether the background scrolls with the page |
background | Shorthand for all background properties | Example: background: url('image.jpg') no-repeat center/cover; |
Example:
body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}✔ Light gray background color
✔ Full-screen background image
✔ No image repetition
✔ Image remains fixed while scrolling