In combination with elevation, azimuth enables different audio sources to be positioned spatially for aural presentation.

This is important in that it provides a natural way to tell several voices apart, as each can be positioned to originate at a different location on the sound stage. Stereo output produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage.

azimuth: angle | [[ left-side | far-left | left | center-left | center | center-right | 
         right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit

Audible source position is described as an angle within the range -360deg to 360deg. The value 0deg means directly ahead in the center of the sound stage (this is the default value). 90deg is to the right, 180deg is behind, and 270deg or -90deg is to the left.

• left-side: Same as 270deg.
• left-side behind: Same as 270deg.
• far-left: Same as 300deg.
• far-left behind: Same as 240deg.
• left: Same as 320deg.
• left behind: Same as 220deg.
• center-left: Same as 340deg.
• center-left behind: Same as 200deg.
• center: Same as 0deg.
• center behind: Same as 180deg.
• center-right: Same as 20deg.
• center-right behind: Same as 160deg.
• right: Same as 40deg.
• right behind: Same as 140deg.
• far-right: Same as 60deg.
• far-right behind: Same as 120deg.
• right-side: Same as 90deg.
• right-side behind: Same as 90deg.
• behind: Same as 180deg. Also used as a modifier for other positional keyword values, as above.
• leftwards: Moves the sound counter-clockwise by 20 degrees, relative to the current angle.
• rightwards: Moves the sound clockwise by 20 degrees, relative to the current angle.

The default value is center.

See also

         h1   { azimuth: 30deg }
         td.a { azimuth: far-right }          /*  60deg */
         #12  { azimuth: behind far-right }   /* 120deg */
         p.comment { azimuth: behind }        /* 180deg */

The background property is a shorthand property for setting the individual background property values in a single place in the style sheet. background can be used to set the values for one or more of: background-attachment, background-color, background-image, background-position, background-repeat.

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

Note: Given a valid declaration, the background property first sets the individual background properties to their initial values, then assigns the explicit values specified in the declaration. You do not have to define a value for each of the individual properties, only those you want to change from their initial defaults.

See also

         body { 
             background: red;
         }
         
         .topbanner {
             background: url("topbanner.png") #00D repeat fixed;
         }

If a background-image is specified, background-attachment determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.

background-attachment:  scroll | fixed | inherit

If scroll is specified, the background image will scroll within the viewport along with the block the image is contained within.

If fixed is specified, the background image will not scroll with its containing element, instead remaining stationary within the viewport.

The default value is scroll.

See also

         body {
             background-image: url("images/cartooncat.png");
             background-attachment: fixed;
         }

background-color sets the background color of an element, either through a color value or the keyword transparent.

background-color: color | transparent | inherit

The color can be specified as a hexidecimal RGB value, a regular RGB value, or by using one of the pre-defined color keywords.

The default value for background-color is transparent meaning the element has no color of its own, instead showing the color of the element behind it.

The default value is transparent.

See also

         .exampleone {
             background-color: teal;
             color: white;
         }
         
         .exampletwo {
             background-color: rgb(153,102,153);
             color: rgb(255,255,204);
         }
         
         .examplethree {
             background-color: #666699;
             color: #FFFFFF;
         }

The background-image property sets the background image for an element.

background-image: uri | none | inherit

Note: Developers should ensure that they specify a background-color to be used if an image is not available. Background images are rendered on top of the background color.

The location of the image resource to be used as a background image.

Used to specify that an element is to have no background image.

The default value is none.

See also

         body { background-image: url("images/darkpattern.png"); }
         
         p { background-image: none; }

background-position sets the initial position of any background image that has been set.

background-position: [ <percentage> | <length> | left | center | right  ] 
         [ <percentage> | <length> | top  | center | bottom ] ? ;

background-position: [ top | center | bottom ];

background-position: inherit;

With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.

With a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.

Same as '0% 0%'.

Same as '50% 0%'.

Same as '100% 0%'.

Same as '0% 50%'.

Same as '50% 50%'.

Same as '100% 50%'.

Same as '0% 100%'.

Same as '50% 100%'.

Same as '100% 100%'.

If only one value is specified, then it sets the horizontal position, with the vertical position at 50%. Otherwise, the first value specifies the horizontal position. Combinations are allowed of keyword, length, or percentage values, but if keywords are mixed with other values, 'left' and 'right' may only be used as the first value, and 'top' and 'bottom' may only be used as the second value. Negative positions are allowed.

The default value is 0% 0%.

See also

         .exampleone {
             background-image: url("logo.png");
             background-position: top center;
         }
         
         .exampletwo {
             background-image: url("logo.png");
             background-position: 25% 75%;
         }
         
         .examplethree {
             background-image: url("logo.png");
             background-position: 2cm bottom;
         }
         
         .examplefour {
             background-image: url("logo.png");
             background-position: center 10%;
         }
         
         .examplefive {
             background-image: url("logo.png");
             background-position: 2cm 50%;
         }

background-repeat specifies whether the image is repeated (tiled), and how.

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

The image is repeated both horizontally and vertically.

The image is repeated horizontally only.

The image is repeated vertically only.

The image is not repeated: only one copy of the image is drawn.

The default value is repeat.

See also

         .exampleone {
             background-image: url("logo.png");
             background-repeat: repeat-x;
         }
         
         .exampletwo {
             background-image: url("logo.png");
             background-repeat: no-repeat;
         }