CSS background Property

CSS background property is a shorthand property for setting all the background properties in one statement.

CSS background property all values are optional, if any values are missing that are acceptable.

Following properties can be sets,

Usages

The following table outline the usages and version history of this property.

Default value: See individual properties
Applies to: all elements
Inherited: no
Version: CSS1
JavaScript Syntax: object.style.background = "#000 url(black.png) top left repeat"

Syntax

Here is a syntax for the CSS background property

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

Property Values

Value Description CSS
background-color Specifies the background color of an element 1
background-image Specifies one or more background images of an element 1
background-position Specifies the initial position of background images 1
background-size Specifies the size of the background images 3
background-repeat Specifies how to repeat the background images 1
background-origin Specifies the positioning area of the background images 3
background-clip Specifies the painting area of the background 3
background-attachment Specifies whether the background scrolls or fixed with the document 1
initial Sets default value of this property 3
inherit Inherits this property from its parent element 2

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS background Property</title>
  <style>
    body { 
      background: silver url("../../images/img_nat.png") no-repeat fixed center; 
    }
  </style>
</head>
<body>
  <h2>Article Heading</h2>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
  <p>paragraph text</p>
</body>
</html>

Run it...   »

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 4+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.