以下是对与css(css3)中常用的background有关样式所做的汇总

如何设置一个声明的背景属性

如何设置一个声明所有的背景属性(如果不设置其中的某个值，也不会出问题。比如:background:#ff0000 url('smiley.gif'); 也是允许的。)

1. 用法:(详细用法请往下看)

tagName / className  / idName
  { 
   background: #00FF00  url(../bgimage.gif)  no-repeat  fixed  top;
}

注：所有浏览器都支持 background 属性.IE8 以及更早的浏览器不支持一个元素多个背景图像，IE7 以及更早的浏览器不支持 “inherit”。IE8 需要 !DOCTYPE。IE9 支持 “inherit”。(跨浏览器的话，IE兼容性存在很大问题。)

2. 建议:

通常建议使用这个属性，而不是分别使用单个属性，因为这个属性在较老的浏览器中能够得到更好的支持，而且需要键入的字母也更少。无继承性。

3. background支持的属性(包含属性值)如下:

• background-color
  规定要使用的背景颜色
  (可能的值:
  颜色名(比如red)
  16进制的颜色名(比如#fff)
  rgb类颜色名(比如:rgb(255,255,255)
  透明类(默认值:transparent）
  inherit类(规定应该从父元素继承 background-color 属性的设置)
  )

• background-position
  规定背景图像的位置
  (可能的值:
  top left
  top center
  top right
  center left
  center center
  center right
  bottom left
  bottom center
  bottom right
  <如果您仅规定了一个关键词，那么第二个值默认为"center">
  x% y%
  <第一个值是水平位置，第二个值是垂直位置。
  如果您仅规定了一个值，另一个值将是 50%>
  xpos ypos
  <表示的是像素，水平位置偏移量，垂直位置偏移量，相对于背景图像原来的位置进行偏移，只规定一个值的话，另外一个值默认为50%>

• background-image
  规定要使用的背景图像
  (可能的值:
  none:不设置背景图像
  在线文件:url(http://…)(通常是一个远程链接)
  本地文件:url(…/sth.jpg))

• background-repeat
  规定如何重复背景图像
  (可能的值:
  repeat-x:背景图像水平重复，填满整个盒子
  repeat-y:背景图像垂直重复，填满整个盒子
  no-repeat:设置背景图像不重复，背景图像的大小等于自身大小
  repeat(默认值):规定在水平和垂直方向重复应用背景图像
  inherit:(继承)
  )

• background-attachment
  规定背景图像是否固定或者随着页面的其余部分滚动(可能的值:
  scroll:随页面其余部分的活动而移动
  fixed:固定位置，不会动
  inherit:表继承
  )

以下为css3新增属性(需要注意兼容性)

• background-size
  规定背景图片的尺寸
  (可能的值:
  x,y(高度，宽度)
  %x,%y(高度＝父元素高度*%x,宽度=父元素宽度*%y)
  cover(完全覆盖整个父盒子，但可能某部分背景会被裁剪掉)
  contain(高，宽自适应，背景填满整个区域)
  )

• background-origin
  (它的设置直接影响背景图片的定位，它和background-position不可以同时使用) 规定背景图片的定位区域
  (可能的值:
  padding-box:让景图像相对于内边距框来定位
  content-box:让背景图像相对于内容(不包含边框，边距，填充)来定位
  border-box:让背景图像相对于边框来定位
  )

• background-clip
  规定背景的裁剪区域
  (可能的值:
  border-box(默认值):从边框向外裁剪背景
  padding-box:从内填充向外裁剪背景
  content-box:从内容区域向外裁剪背景
  no-clip:表示不裁切，和参数border-box显示同样的效果
  )