返回到：CSS 背景 | CSS教程
background-image 属性设置一个元素的背景图像。
元素的背景是元素的总大小，包括填充和边界（但不包括边距）。
默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。
| 默认值: | none |
|---|---|
| 继承: | no |
| 版本: | CSS1 |
| JavaScript 语法: | object object.style.backgroundImage=”url(stars.gif)” |
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 属性 | 谷歌 | IE | 火狐 | 苹果 | opera |
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注意: IE8 及其更早版本不支持一个元素上设置多个背景图片。
| 值 | 说明 |
|---|---|
| url(‘URL’) | 图像的URL |
| none | 无图像背景会显示。这是默认 |
| linear-gradient() | 创建一个线性渐变的 “图像”(从上到下) |
| radial-gradient() | 用径向渐变创建 “图像”。 (center to edges) |
| repeating-linear-gradient() | 创建重复的线性渐变 “图像”。 |
| repeating-radial-gradient() | 创建重复的径向渐变 “图像” |
| inherit | 指定背景图像应该从父元素继承 |
设置body元素的背景图像：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程(web176.com)</title>
<style>
body
{
background-image:url('/wp-content/uploads/2022/02/CSS.jpg');
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>Hello Web176教程!</h1>
</body>
</html>