Roots
Back

CSS Backgrounds

Background Color

background-color: name / code ;

name - The name of a color. There are many different words which are recognised, such as aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
code - The hex code for a color.

Background Image

background-image: url("url");

url - The full or relative address of an image.

Background Image Repeat

background-repeat: repeat / repeat-x / repeat-y / norepeat;

repeat - Tile the image vertically and horizontally to fill the entire background area.
repeat-x - Tile the image horizontally in one row across background area.
repeat-y - Tile the image vertically in one column down the background area.
norepeat - Display the image once, without tiling it.

Background Image Attachment

background-attachment: scroll / fixed;

scroll - The background will scroll with the page content.
fixed - The background will remain static while the page content scrolls above it.

Background Image Positioning

background-position: horizontal-position: [value / hpos / percentage] vertical-position: [value / vpos / percentage];

Background position takes two arguments. The first, horizontal-position, can be either value, hpos or percentage. The second, vertical-position, can be omitted, in which case it will be assumed to be centered. If it is included, it can be either value, vpos or percentage.

value - A number of pixels to offset the background from where it would normally appear.
hpos - A keyword. Either left, center or right.
vpos - A keyword. Either top, center or bottom.
percentage - The distance to offset the background as a percentage of the containing element.