CSS Background - 10 Properties and its Values (Reference)

Tech:
Css
Since:
1 year ago
Views:
2

The CSS background property is used to set the background color, image, and other background properties of an element.

background

A shorthand property for all the background-* properties.

background: color image position/ size repeat origin clip attachment initial;
background: inherit;

background-attachment

Sets whether a background image scrolls with the rest of the page, or is fixed.

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: initial;
background-attachment: inherit;

background-blend-mode

Specifies the blending mode of each background layer (color/image).

background-blend-mode: normal;
background-blend-mode: multiply;
background-blend-mode: screen;
background-blend-mode: overlay;
background-blend-mode: darken;
background-blend-mode: lighten;
background-blend-mode: color-dodge;
background-blend-mode: saturation;
background-blend-mode: color;
background-blend-mode: luminosity;

background-clip

Defines how far the background (color or image) should extend within an element.

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: initial;
background-clip: inherit;

background-color

Specifies the background color of an element.

background-color: color;
background-color: transparent;
background-color: initial;
background-color: inherit;

background-image

Specifies one or more background images for an element.

background-image: url;
background-image: none;
background-image: initial;
background-image: inherit;

background-origin

Specifies the origin position of a background image.

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
background-origin: initial;
background-origin: inherit;

background-position

Specifies the position of a background image.

background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: x% y%;
background-position: xpos ypos;
background-position: initial;
background-position: inherit;

background-repeat

Sets if/how a background image will be repeated.

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-repeat: initial;
background-repeat: inherit;

background-size

Specifies the size of the background images.

background-size: auto;
background-size: length;
background-size: cover;
background-size: contain;
background-size: initial;
background-size: inherit;