#CSS Background
In CSS, the background property is used to set the background of an element. It's very powerful and can control background color, background image, position, size, repeat behavior, and more.
You can use the shorthand background property or set the following sub-properties individually:
| Property | Description | Example |
|---|---|---|
background-color | Background color | background-color: #f0f0f0; |
background-image | Background image | background-image: url('bg.jpg'); |
background-repeat | Whether to repeat | background-repeat: no-repeat; |
background-position | Position of the image | background-position: center top; |
background-size | Size of the background | background-size: cover; |
background-attachment | Scroll behavior | background-attachment: fixed; |
background-origin | Area where background is positioned | background-origin: padding-box; |
background-clip | Area where background is painted | background-clip: content-box; |
#Example:
<!-- Background image -->
<div style="background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
Background image
<!-- Background image centered -->
<div style="background-position: center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
Centered
<!-- Background image centered, no repeat -->
<div style="background-repeat: no-repeat; background-position: center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
No repeat
<!-- Background image centered, no repeat, stretched cover -->
<div style="background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(https://xplanc.org/primers/icon.svg); height:240px;"></div>
stretched cover