CSS background Property

Definition and Usage

background Abbreviated properties set all background properties in a declaration.

The following properties can be set:

If a value is not set, there will be no problem, for example, background:#ff0000 url('smiley.gif'); is also allowed.

It is usually recommended to use this property instead of using individual properties separately, because this property is better supported in older browsers and requires fewer letters to be typed.

See Also:

CSS Tutorial:CSS Background,CSS Background (Advanced)

HTML DOM Reference Manual:background Property

Example

How to set all background properties in one declaration:

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

Try It Yourself

CSS Syntax

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

Property Value

Value Description CSS
background-color Specifies the background color to be used. 1
background-position Specifies the position of the background image. 1
background-size Specifies the size of the background image. 3
background-repeat Specifies how the background image is repeated. 1
background-origin Specifies the positioning area of the background image. 3
background-clip Specifies the drawing area of the background. 3
background-attachment Specifies whether the background image is fixed or scrolls with the rest of the page. 1
background-image Specifies the background image to be used. 1
inherit Specifies that the background property settings should be inherited from the parent element. 1

Technical Details

Default Value: not specified
Inheritance: no
Version: CSS1 + CSS3
JavaScript Syntax: object.style.background="white url(paper.gif) repeat-y"

Browser Support

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5