background

Description

background is a shorthand property of expressing the various background properties using a single rule.

ItemValue
Initial value Initial value from individual properties.
Inherited No.
Version CSS3
JavaScript syntax object.style.background="red url(yourImage.gif) top left no-repeat"
Applies to All elements.

Syntax and Property Values


background:background-color /*from  w w w  . j  a  v a  2s .c om*/
           background-image 
           background-repeat 
           background-attachment 
           background-position; 

The property values are listed in the following table.

Value Description CSS
background-color set the background color 1
background-position set position for background images 1
background-size set size for background images 3
background-repeat how to repeat the background images 1
background-origin set positioning area for background images 3
background-clip set painting area for background images 3
background-attachment if to scroll with the rest of the page 1
background-image set background images to use 1

Example


<!DOCTYPE HTML>
<html>
  <head>
      <style>
h1 {<!--from  w  ww .  ja v  a  2 s.  c  o m-->
    font-size: 2.1em;
    background: pink;
    padding: 1em;
    border: thin solid black;
}
p {
    font-size: 0.9em;
    padding: 1em;
    border: thin solid black;
    background: #00ff00 url('http://java2s.com/style/download.png') no-repeat fixed center; 
    color: white;
}
      </style>
  </head>
  <body>
      <h1>
          This is a heading
      </h1>
      <p>
          This is a paragraph of text.
      </p>
  </body>
</html>

Click to view the demo

The code above generates the following result.

background




















Home »
  HTML CSS »
    HTML CSS Reference »




HTML Tag Reference
CSS Reference
CSS Selector Reference
Encoding Reference