CSS background Property

❮ Previous Reference Next ❯

Example

body {
  background: green url("smiley.png") repeat-y fixed center;
}
Try this code ❯





Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Lorem Ipsum is simply dummy text of the printing and typesetting industry.


Meaning

The background is shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

Constituent properties

This property is a shorthand for the following CSS properties:

Default value:See individual properties
Inherited:No
Animatable:Yes
Version:CSS1 + new properties in CSS3
JavaScript syntax:
object.style.background="bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit|revert|revert-layer|unset";


Standard Syntax

background: [ bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment ] initial|inherit|revert|revert-layer|unset;


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Property Values

The following table describes the values of this property.

Value Description CSS Version
background-color Specifies the background color of an element. CSS1
background-image Specifies one or several background images for an element. CSS1
background-position Specifies the initial position of the background image. CSS1
background-size Specifies the size of the background images. CSS3
background-repeat Specifies how background images are tiled after they have been sized and positioned. CSS1
background-origin Specifies the positioning area of the background images. CSS3
background-clip Specifies the area within which the background is painted. CSS3
background-attachment Specifies whether the background scrolls with the document, or remains fixed to the viewing area. CSS1
initial Sets this property to its default value. CSS3
inherit If specified, the associated element takes the computed value of its parent element animation-delay property. CSS2
revert Reverts the cascaded value of the property from its current value to the value the property CSS4
revert-layer Rollback styles to the ones specified in previous cascade layers. CSS4
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. CSS4


Default CSS Property Values

selectors {
  background-image: none
  background-position: 0% 0%
  background-size: auto auto
  background-repeat: repeat
  background-origin: padding-box
  background-clip: border-box
  background-attachment: scroll
  background-color: transparent
}
❮ Previous Reference Next ❯