Example

Set different background properties in one declaration:

body { 
    background: lightblue url("img_tree.gif") no-repeat fixed center; 
}
Try it Yourself »

Definition and Usage

The background shorthand property sets all the background properties in one declaration.

The properties that can be set, are: background-color, background-image, background-position, background-size, background-repeat, background-origin, background-clip, and background-attachment.

It does not matter if one of the values above are missing, e.g. background:#ff0000 url(smiley.gif); is allowed.

Default value:see individual properties
Inherited:no
Animatable:yes, see individual propertiesRead about animatableTry it
Version:CSS1 + new properties in CSS3
JavaScript syntax:object.style.background="red url(smiley.gif) top left no-repeat"Try it

Browser Support

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

Property
background1.04.01.01.03.5

Note: Internet Explorer 8 and earlier versions do not support multiple background images on one element.

Note: See individual browser support for each value below.



CSS Syntax

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

Note: If one of the properties in the shorthand declaration is the bg-size property, you must use a / (slash) to separate it from the bg-position property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.

Note: If using multiple background-image sources but also want a background-color, the background-color parameter needs to be last in the list.

Property Values

ValueDescriptionCSS
background-colorSpecifies the background color to be used1
background-imageSpecifies ONE or MORE background images to be used1
background-positionSpecifies the position of the background images1
background-sizeSpecifies the size of the background images3
background-repeatSpecifies how to repeat the background images1
background-originSpecifies the positioning area of the background images3
background-clipSpecifies the painting area of the background images3
background-attachmentSpecifies whether the background images are fixed or scrolls with the rest of the page1
initialSets this property to its default value. Read about initial3
inheritInherits this property from its parent element. Read about inherit2

Related Pages

CSS tutorial: CSS BackgroundCSS Backgrounds (advanced)

HTML DOM reference: background property

'WEB > CSS' 카테고리의 다른 글

[CSS] Vertical Align  (0) 2018.01.24
[CSS]크로스 브라우징  (0) 2018.01.24
[CSS]text-indent  (0) 2018.01.18
CSS: How to align vertically a “label” and “input” inside a “div”?  (0) 2018.01.18
[CSS] Background Image Size handling  (0) 2018.01.17

+ Recent posts