The CSS Background properties are used to define the background effects.
There are various CSS background properties which are listed below:
Background Properties | Descriptions |
1. background-attachment | Set background image |
2. background-blend-mode | Set the background blending mode with color/image |
3. background-clip | Specify the background extend area |
4. background-color | Set background color |
5. background-image | Set background image |
6. background-origin | Set the background origin position |
7. background-position | Set the background position |
8. background-position-x | Set the background x-position |
9. background-position-y | Set the background y-position |
10. background-repeat | Set the background repeated image |
11. background-repeat-x | Set the background x-repeated image |
12. background-repeat-y | Set the background y-repeated image |
13. background-size | Set the background size |
1. background-attachment:
background-attachment can be scroll | fixed | inherit. Syntax of using background-attachment is shown below:
body
{
background-attachment: scroll;
}
body
{
background-attachment: fixed;
}
body
{
background-attachment: inherit;
}
2. background-blend-mode:
CSS background-blend-mode values are:
- color
- color-burn
- color-dodge
- darken
- difference
- exclusion
- hard-light
- hue
- lighten
- luminosity
- multiply
- normal
- overlay
- saturation
- screen
- soft-light
Example:
body
{
background-color-blend: normal;
}
3. background-clip:
CSS background-clip values are
- content-box
- border-box
- padding-box
- initial
- inherit
Example:
body
{
background-clip: content-box;
}
4. background-color:
CSS background-color can be defined as following:
- Color
- HEX value
- RGB value
- RGBA value
- HSL value
- HSLA value
Example:
Color:
body
{
background-color: pink;
}
HEX value:
body {
background-color: #ff00e1;
}
RGB value:
body {
background-color: rgb(21, 46, 74);
}
RGBA value:
body {
background-color: rgba(21, 24, 24, 0.6);
}
HSL value:
body {
background-color: hsl(49, 23%, 21%);
}
HSLA value:
body {
background-color: hsla(39, 23%, 21%, 0.6);
}
5. background-image
background-image property is used to set a background image in the webpage.
Example:
body {
background-image: url("my-background-image.png");
}
6. background-origin
background-origin value are
- content-box
- border-box
- padding-box
- initial
- inherit
Example:
body {
background-origin: content-box;
}
7. background-position
Some useful background-position values are listed below:
- center
- left
- right
- center top
- center center
- center bottom
- left top
- left center
- left bottom
- right top
- right center
- right bottom
Example:
body {
background-position: center;
}
8 & 9. background-position-x & background-position-y
background-position-x and y can be defined by following values:
- keyword values
- percentage values
- length values
- side-relative values
- multiple values
- global values
keyword values:
/*For x-axis*/
body
{
background-position-x: left;
background-position-x: center;
background-position-x: right;
}
/*For y-axis*/
body
{
background-position-y: left;
background-position-y: center;
background-position-y: right;
}
percentage values:
/*For x-axis*/
body
{
background-position-x: 50%;
}
/*For y-axis*/
body
{
background-position-y: 50%;
}
length values:
/*For x-axis*/
body
{
background-position-x: 2cm;
background-position-x: 10px;
background-position-x: 2em;
}
/*For y-axis*/
body
{
background-position-y: 2cm;
background-position-y: 10px;
background-position-y: 2em;
}
side-relative values:
/*For x-axis*/
body
{
background-position-x: left 10%;
background-position-x: right 10px;
}
/*For y-axis*/
body
{
background-position-y: left 10%;
background-position-y: right 10px;
}
multiple values:
/*For x-axis*/
body
{
background-position-x: 25% center;
}
/*For y-axis*/
body
{
background-position-y: 25% center;
}
global values:
/*For x-axis*/
body
{
background-position-x: initial;
background-position-x: inherit;
background-position-x: unset;
}
/*For y-axis*/
body
{
background-position-y: initial;
background-position-y: inherit;
background-position-y: unset;
}
10. background-repeat
background-repeat values are:
- repeat
- no-repeat
- space
- round
- initial
Example:
body
{
background-repeat:repeat;
}
11. background-repeat-x & background-repeat-y:
Example:
/*For x-axis*/
body
{
background-repeat-x:repeat;
}
/*For y-axis*/
body
{
background-repeat-y:repeat;
}
12. background-size:
CSS background-size property values are:
- contain
- cover
- percentage
- pixel
Example:
/*Contain*/
body
{
background-size: contain;
}
/*Cover*/
body
{
background-size: cover;
}
/*percentage*/
body
{
background-size: 35%;
}
/*pixels*/
body
{
background-size: 200px 100px;
}
You may be interested in the following topics:
- CSS background-size
- CSS background-repeat-y
- CSS background-repeat-x
- CSS background-repeat
- CSS background-position-y
- CSS background-position-x
- CSS background-position
- CSS background-origin
- CSS background-image
- CSS background-color
- CSS background-clip
- CSS background-blend-mode
- CSS background-attachment
- CSS Background (All Properties)