CSS Background Styles
background
Sets any combination of background-attachment, background-color, background-image, background-position, and background-repeat attributes, in any order, with one shortcut.
css syntax
background: background-attachment background-color background-image background-position background-repeat
background-attachment
Sets whether a background image remains fixed or scrolls with the document.
css syntax
background-attachment: fixed | scroll
background-color
Sets the background color of a block element. If color and an image are specified, the color is loaded and then the image is overlayed. Color will show through transparent pixels.
Color is represented by a combination of red, green, and blue brightness values. Colors may specified by name, by three or six digit hex values, or by decimal rgb values. The color may be set to "transparent" which lets the background of the parent element show through. See also color.
css syntax
background-color: color
The following examples would all set the background color to a bright yellow.
examples
background-color: yellow
background-color: #ff0
background-color: #ffff00
background-color: rgb(255, 255, 0)
background-image
Sets the background image of an element.
css syntax
background-image: uri | none
example
background-image: url('image.png')
background-position
Sets the background image location within the parent block element. The first format positions the image to the left, right, or horizontal center, and to the top, bottom, or vertical center of the parent element.
The second format position the top left corner of the image to the specified horizontal and vertical position. These may be specified as a percentage of the parent elements width and height or in length units. If only one percentage value is specified, then it is taken as the horizontal position and the vertical is set to 50% of the parent elements height.
css syntax
background-position: [top | center | bottom] [left | center | right]
background-position: [percentage | length] [percentage | length]
background-position-x
Performs the same function as background-position for horizontal positioning only.
css syntax
background-position-x: left | center | right
background-position-x: percentage | length
background-position-y
Performs the same function as background-position for vertical positioning only.
css syntax
background-position-y: top | center | bottom
background-position-y: percentage | length
background-repeat
Causes an image to be not tiled, tiled in both the horizontal and vertical directions, tiled only in the horizontal direction, or tiled only in the vertical direction.
css syntax
background-repeat: no-repeat | repeat | repeat-x | repeat-y
