我们可以通过CSS来在任何HTML元素中放置背景图片。这主要是通过CSS background-image属性来完成的。
body { background-image: url("images/gradient.gif"); }
我们不能够使用 src 属性来制作背景图片，这是一个HTML标签<img>的属性，而不是CSS属性。同样我们也不能使用href属性或link标签。通过使用background-image属性，在url中指定图片的位置，可以直接将图片插入到页面中，制作成背景图片。
我们这里强调的是background-image实现可以使用在任何元素中，<body>元素是常被用于制作背景图片的元素，我们下面的例子也是以<body>元素来举例。
用于背景图片的图片最好用PhotoShop之类的图像软件处理好，尽量减少图片的尺寸，并使图片在重复时能做到无缝集成。
默认情况下，背景图片将在元素的水平和垂直方向上不断重复，如果不想图片重复，可以通过background-repeat属性来禁止它。
body { background-image: url("images/gradient.gif"); background-repeat: no-repeat; }
background-repeat属性还可以设置为repeat-x（水平方向上重复）和repeat-y（垂直方向上重复）。
你还可以改变背景图片的参考位置（background-position）来获取背景图片，注意：背景图片的参考原点总是在图片的左上角。
background-position: 20em 10px;
background-position的属性值总是先写水平方向在写垂直方向，中间使用空格隔开，除非是你使用默认关键字center。在上面的例子中，background-image将离页面的左边20em，里页面的上边10px。这里可以使用任何的CSS单位。也可以像上面那样混合使用。并且还可以是负值。
background-position可以使用预定义的关键字：top、center、bottom、left和right。background-position的默认值是左上角。如果你希望背景图片位于元素的中间，你可以改变position的设置：
background-position: center;
关于Body高度的问题
当你使用background-position: center;来为<body>制作背景图片时，如果页面上的内容比较少，你会发现背景图片不在浏览器窗口的正中间。那是因为Firefox浏览器和其他兼容浏览器是从页面内容获取页面的垂直高度，而不是从浏览器的高度获取。为解决这一问题，可以单独为它提供一个样式声明：
html, body { height: 100%; }
默认情况下，背景图片会随着页面上下滚动而变化，如果你希望背景图片固定不动，可以使用background-attachment上下来fixed它。
background-image上下项background-color属性一样，可以使用简写方式：background。但是建议不要简写，这样使CSS文件看起来会更加清晰。
在CSS3中为背景图片添加了很多新的属性，包括多重背景图片和动态改变背景图片的尺寸。
