CSS background Property

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
Media
Visual
Computed value
See individual properties
Animatable
See individual properties
CSS Version
CSS1, CSS2, CSS3
JavaScript syntax
object.style.background

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'>

Example

<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>
body {
   background: #98c8b8;
}
.background {
   padding: 30px;
   background: #e7e887;
   border: 1px solid red;
}

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
412113.51
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
218410.11Yes

Last updated by CSSPortal on: 16th October 2019