选择的类名最好描述其中包含的信息类型，而不是想要达到的视觉效果。
一般来说，前景是元素的文本，不过前景还包括元素周围的边框。color属性可以用来设置前景色。color有很多用法，其中最基本的是替换HTML3.2的BODY属性TEXT、LINK、ALINK和VLINK。color值可以影响元素周围的边框。color（从理论上讲）可以为表单元素设置color值。元素的背景区包括前景之下直到边框外边界的所有空间，因此，内容框和内边距都是元素背景的一部分，且边框画在背景之上。background-color可以设置元素的背景颜色。background-color不能继承，默认值是transparent。
background-image属性可以把图像放入背景。允许向任何元素应用背景图像，可以是块级元素也可以是行内元素。类似于background-color，background-image也不能继承，实际上，所有背景属性都不能继承。使用背景图像的同时最好再指定一个背景色。background-repeat设置图像重复的方式，值：repeat|repeat-x|repeat-y|no-repeat|inherit，默认值是repeat。repeat导致图像在水平垂直方向上都平铺，repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。
background-position可以给背景定位，可以使用一些关键字：top、bottom、left、right和center，还可以使用长度值和百分数。位置关键字可以按任何顺序出现，只要保证不能超过两个关键字，一个对应水平方向，一个对应垂直方向。如果只出现了一个关键字，则认为另一个关键字使center。百分数同时应用于元素和原图像，如果用百分数设置位置，水平值总是先出现。如果只提供了一个百分数值，所提供的这个值将用作水平值，垂直值假设为50%。在为原图像的位置提供长度值时，这些长度值将解释为从元素内边距区左上角的偏移，偏移点是原图像的左上角，即原图像的左上角与background-position声明中指定的点对齐。可以结合使用长度和百分数值。如果使用长度值或百分数值，可以使用负值将原图像拉出元素的背景区。
background-attachment属性可以设置原图像相对于可视区是否固定，值：scroll|fixed|inherit。值为fixed时，首先，图像不会随文档滚动，其次，原图像的位置由可视区的大小确定，而不是包含该图像的元素的大小（或在可视区中的位置）决定。值为scroll时，背景会随文档滚动，而且当窗口大小调整时，不一定改变原图像的位置。如果一个背景图像已经固定（fixed），它会相对于可视区定位，而不是相对于包含该图像的元素定位。不过，背景将只在其包含元素中可见。
背景属性可以汇总到一个简写属性background，值：[<background-color>||<background-image>||<background-repeat>||<background-attachment>||<background-position>]|inherit.background没有必不可少的值，只要至少出现一个值就行。