CSS background Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The background property is a shorthand property for setting most background properties at the same place in the style sheet. The number of comma-separated items defines the number of background layers. Given a valid declaration, for each layer the shorthand first sets the corresponding layer of each of background-image, background-position, background-size, background-repeat, background-origin, background-clip and background-attachment to that property's initial value, then assigns any explicit values specified for this layer in the declaration. Finally background-color is set to the specified color, if any, else set to its initial value.

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.background

Interactive Demo

background: skyblue;

background: url("images/diamond.png") repeat;

background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);

background: center / contain no-repeat url("images/sunset.jpg"), #81FE9D;

Syntax

background: [ <bg-layer> , ]* <final-bg-layer>

Values

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

<bg-image>See background-image CSS property for values.
<position>See background-position CSS property for values.
<bg-size>See background-size CSS property for values.
<repeat-style>See background-repeat CSS property for values.
<box>See background-origin CSS property for values.
<box>See background-clip CSS property for values.
<attachment>See background-attachment CSS property for values.
<background-color>See background-color CSS property for values.
inherit

Example

HTML

<div class="background">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

CSS

body {
   background: #98c8b8;
}
.background {
   padding: 30px;
   background: #e7e887;
   border: 1px solid red;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS background property.

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	10.1	1	1	2

Last updated by CSSPortal on: 1st January 2024

Support Us