background

The background property is a shorthand property for setting background-attachment, background-color, background-image, background-position, and background-repeat.

Syntax
Example | background-attachment | fixed
Example | background-attachment | scroll
Example | background-color | color
Example | background-color | transparent
Example | background-image | none
Example | background-image | uri
Example | background-position | bottom
Example | background-position | center
Example | background-position | left
Example | background-position | length
Example | background-position | percentage
Example | background-position | right
Example | background-position | top
Example | background-repeat | no-repeat
Example | background-repeat | repeat
Example | background-repeat | repeat-x
Example | background-repeat | repeat-y
Example | DOM | background-attachment
Example | DOM | background-color
Example | DOM | background-image
Example | DOM | background-position
Example | DOM | background-repeat
References

CSS


                                background: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit

DOM


                                [window.]document.getElementById("element-id").style.background = "background-attachment background-color background-image background-position background-repeat";

Initial:	transparent none repeat scroll 0% 0%
Applies To:	all elements
Inherited:	no
Percentages:	allowed on background-position
Media:	visual

<html>
  <head>
    <title>background</title>
  </head>
  <body id="id1">
    <a href="/" onmouseover="mouseover1();">bottom</a>
    <a href="/" onmouseover="mouseover2();">center</a>
    <a href="/" onmouseover="mouseover3();">left</a>
    <a href="/" onmouseover="mouseover4();">length</a>
    <a href="/" onmouseover="mouseover5();">percentage</a>
    <a href="/" onmouseover="mouseover6();">right</a>
    <a href="/" onmouseover="mouseover7();">top</a>
  </body>
  <script type="text/javascript">
    function mouseover1() {
      document.getElementById("id1").style.background = "url(/assets/png/HappyFace.png) no-repeat bottom";
    }
    function mouseover2() {
      document.getElementById("id1").style.background = "url(/assets/png/HappyFace.png) no-repeat center";
    }
    function mouseover3() {
      document.getElementById("id1").style.background = "url(/assets/png/HappyFace.png) no-repeat left";
    }
    function mouseover4() {
      document.getElementById("id1").style.background = "url(/assets/png/HappyFace.png) no-repeat 100px 50px";
    }
    function mouseover5() {
      document.getElementById("id1").style.background = "url(/assets/png/HappyFace.png) no-repeat 75% 25%";
    }
    function mouseover6() {
      document.getElementById("id1").style.background = "url(/assets/png/HappyFace.png) no-repeat right";
    }
    function mouseover7() {
      document.getElementById("id1").style.background = "url(/assets/png/HappyFace.png) no-repeat top";
    }
    document.getElementById("id1").style.background = "url(/assets/png/HappyFace.png) no-repeat center";
  </script>
</html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

CSS

Syntax

Example | background-attachment | fixed

Example | background-attachment | scroll

Example | background-color | color

Example | background-color | transparent

Example | background-image | none

Example | background-image | uri

Example | background-position | bottom

Example | background-position | center

Example | background-position | left

Example | background-position | length

Example | background-position | percentage

Example | background-position | right

Example | background-position | top

Example | background-repeat | no-repeat

Example | background-repeat | repeat

Example | background-repeat | repeat-x

Example | background-repeat | repeat-y

Example | DOM | background-attachment

Example | DOM | background-color

Example | DOM | background-image

Example | DOM | background-position

Example | DOM | background-repeat

References