Defines how the background image will behave when scrolling the page.
default background-attachment: scroll;
The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.
background-attachment: fixed;
The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.
Defines how far the background should extend within the element.
default background-clip: border-box;
The background extends completely throughout the element, even under the border.
background-clip: padding-box;
The background only extends to the edge of the border: it includes the padding but not the border.
background-clip: content-box;
The background only extends to the edge of the content: it doesn't include the padding, nor the border.
Defines the color of the element's background.
default background-color: transparent;
By default, the background color is transparent, basically meaning that there is no background color.
background-color: red;
You can use one of the 140+ color names.
background-color: #05ffb0;
You can use hexadecimal color codes.
background-color: rgb(50, 115, 220);
You can use rgb() color codes:
redgreenblueEach of them can have a value between 0 and 255.
background-color: rgba(50, 115, 220, 0.3);
You can use rgba() color codes:
rgbalpha channel and defines the opacity of the colorThe alpha value can go from zero 0 (transparent) to one 1 (opaque).
background-color: hsl(14, 100%, 53%);
You can use hsl() color codes:
hue and can go from 0 to 359saturation and go from 0% to 100%luminosity and go from 0% to 100%background-color: hsla(14, 100%, 53%, 0.6);
You can use hsl()a color codes:
hslalpha channel and defines the opacity of the colorThe alpha value can go from zero 0 (transparent) to one 1 (opaque).
Defines an image as the background of the element.
default background-image: none;
Removes any background image.
background-image: url(/images/jt.png);
Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).
background-image: linear-gradient(red, blue);
You can define a linear gradient as the background image.
You need to define at least two colors. The first one will start at the top, the second one at the bottom.
The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.
background-image: linear-gradient(45deg, red, blue);
You can specify an angle, either in degrees, or with keywords.
When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.
In this example, 45deg means 2:30, or the top right corner.
background-image: radial-gradient(green, purple);
You can define a radial gradient as the background image.
You need to define at least two colors. The first one will be at the center, the second one at the edges.
background-image: radial-gradient(circle, green, purple);
You can specify the shape of the radial gradient: circle or ellipse (default).
background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);
You can specify color stops using percentage values.
background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);
You can specify where the gradient should end:
closest-sideclosest-cornerfarthest-sidefarthest-cornerbackground-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);
Like with the background-position, you can specify the position of the gradient.
Defines the origin of the background image.
default background-origin: padding-box;
The background image starts at the edge of the border: within padding but not the border.
background-origin: border-box;
The background image starts under the border.
background-origin: content-box;
The background image only starts at the edge of the content: it doesn't include the padding, nor the border.
Defines the position of the background image.
default background-position: 0% 0%;
The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.
background-position: bottom right;
You can use a combination of position keywords: center, top, bottom, left and right.
background-position: center center;
The background image will be positioned in the center of the element.
Defines how the background image repeats itself across the element's background, starting from the background position.
default background-repeat: repeat;
The background image will repeat itself both horizontally and vertically.
background-repeat: repeat-x;
The background image will only repeat itself horizontally.
background-repeat: repeat-y;
The background image will only repeat itself vertically.
background-repeat: no-repeat;
The background image will only appear once.
Defines the size of the background image.
default background-size: auto auto;
The background image will retain its original size.
For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.
background-size: 120px 80px;
You can specify a size in pixels:
background-size: 100% 50%;
You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.
background-size: contain;
The keyword contain will resize the background image to make sure it remains fully visible.
background-size: cover;
The keyword cover will resize the background image to make sure the element is fully covered.
Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.
Defines how the background image will behave when scrolling the page.
default background-attachment: scroll;
The background image will scroll with the page. It will also position and resize itself according to the element it's applied to.
background-attachment: fixed;
The background image will not scroll with the page, and remain positioned according to the viewport. It will also position and resize itself according to the viewport. As a result, the background image will probably only be partially visible.
Defines how far the background should extend within the element.
default background-clip: border-box;
The background extends completely throughout the element, even under the border.
background-clip: padding-box;
The background only extends to the edge of the border: it includes the padding but not the border.
background-clip: content-box;
The background only extends to the edge of the content: it doesn't include the padding, nor the border.
Defines the color of the element's background.
default background-color: transparent;
By default, the background color is transparent, basically meaning that there is no background color.
background-color: red;
You can use one of the 140+ color names.
background-color: #05ffb0;
You can use hexadecimal color codes.
background-color: rgb(50, 115, 220);
You can use rgb() color codes:
redgreenblueEach of them can have a value between 0 and 255.
background-color: rgba(50, 115, 220, 0.3);
You can use rgba() color codes:
rgbalpha channel and defines the opacity of the colorThe alpha value can go from zero 0 (transparent) to one 1 (opaque).
background-color: hsl(14, 100%, 53%);
You can use hsl() color codes:
hue and can go from 0 to 359saturation and go from 0% to 100%luminosity and go from 0% to 100%background-color: hsla(14, 100%, 53%, 0.6);
You can use hsla() color codes:
hslalpha channel and defines the opacity of the colorThe alpha value can go from zero 0 (transparent) to one 1 (opaque).
Defines an image as the background of the element.
default background-image: none;
Removes any background image.
background-image: url(/images/jt.png);
Uses the image defined in the url path. This path can either be relative (to the css file) or absolute (like http://cssreference.io/images/jt.png).
background-image: linear-gradient(red, blue);
You can define a linear gradient as the background image.
You need to define at least two colors. The first one will start at the top, the second one at the bottom.
The default angle is to bottom (or 180deg), which means the gradient is vertical, starting at the top, ending at the bottom of the element.
background-image: linear-gradient(45deg, red, blue);
You can specify an angle, either in degrees, or with keywords.
When using degress, you specify the direction of the gradient, or when it ends. So 0deg means the the top of the element, like 12:00 on a clock.
In this example, 45deg means 2:30, or the top right corner.
background-image: radial-gradient(green, purple);
You can define a radial gradient as the background image.
You need to define at least two colors. The first one will be at the center, the second one at the edges.
background-image: radial-gradient(circle, green, purple);
You can specify the shape of the radial gradient: circle or ellipse (default).
background-image: radial-gradient(circle, green 0%, purple 20%, orange 100%);
You can specify color stops using percentage values.
background-image: radial-gradient(circle closest-side, green 0%, purple 20%, orange 100%);
You can specify where the gradient should end:
closest-sideclosest-cornerfarthest-sidefarthest-cornerbackground-image: radial-gradient(circle closest-side at 45px 45px, green 0%, purple 20%, orange 100%);
Like with the background-position, you can specify the position of the gradient.
Defines the origin of the background image.
default background-origin: padding-box;
The background image starts at the edge of the border: within padding but not the border.
background-origin: border-box;
The background image starts under the border.
background-origin: content-box;
The background image only starts at the edge of the content: it doesn't include the padding, nor the border.
Defines the position of the background image.
default background-position: 0% 0%;
The background image will be positioned at 0% on the horizontal axis and 0% on the vertical axis, which means the top left corner of the element.
background-position: bottom right;
You can use a combination of position keywords: center, top, bottom, left and right.
background-position: center center;
The background image will be positioned in the center of the element.
Defines how the background image repeats itself across the element's background, starting from the background position.
default background-repeat: repeat;
The background image will repeat itself both horizontally and vertically.
background-repeat: repeat-x;
The background image will only repeat itself horizontally.
background-repeat: repeat-y;
The background image will only repeat itself vertically.
background-repeat: no-repeat;
The background image will only appear once.
Defines the size of the background image.
default background-size: auto auto;
The background image will retain its original size.
For example, this background image is 960px by 640px large. Its aspect ratio is 3 by 2. It's bigger than its container (which is 150px high) and will thus be clipped.
background-size: 120px 80px;
You can specify a size in pixels:
background-size: 100% 50%;
You can use percentage values as well. Beware that this can alter the aspect ratio of the background image, and lead to unexpected results.
background-size: contain;
The keyword contain will resize the background image to make sure it remains fully visible.
background-size: cover;
The keyword cover will resize the background image to make sure the element is fully covered.
Shorthand property for background-image background-position background-size background-repeat background-origin background-clip background-attachment and background-color.