background - HTML CSS CSS Property

Description

The background CSS property is a shorthand property for setting the individual background properties:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color.

The following table summarizes the background property.

Item	Value
Default value:	See individual properties
Applies to:	All elements
Inherited:	No
Animatable:	Yes, as some of the properties of the shorthand are animatable.

Syntax

The syntax of the property is as follows:

background:      [ image position/size repeat attachment origin clip color ] | initial | inherit

Note:If any property listed above is missing or omitted, the default value for that property will be inserted, if any. See individual properties for details.

Property Values

The following table describes the values of this property.

Value	Description
background-attachment	scrolls or remains fixed to the viewing area.
background-color	background color.
background-clip	Set the area where the background is painted.
background-image	background images.
background-origin	Set the positioning area.
background-position	Sets the initial position.
background-repeat	Set how background images are tiled after they have been sized and positioned.
background-size	Set the size of the background images.
initial	Sets to its default value.
inherit	takes the value of its parent element background property.

The example below shows the background property.

Example

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS background shorthand property</title>
  <style type="text/css">
    body {<!--from w  ww  .j a v a  2  s.  c o m-->
      background: #ffff00 url("https://www.java2s.com/style/demo/Opera.png") no-repeat fixed center;
    }
    </style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>