使用background-image属性通过url()引入图片路径可设置CSS背景图，如background-image: url('images/bg.jpg')；路径支持相对、绝对及网络地址；常配合background-repeat、background-size、background-position和background-attachment优化显示效果；也可用background简写属性合并设置，如background: url('bg.jpg') no-repeat center/cover。
在CSS中添加背景图使用 background-image 属性，最常用的方式是通过 url() 引入图片路径。下面详细介绍如何正确设置背景图。
基本语法
使用 background-image 添加背景图的格式如下：
background-image: url('图片路径');例如：
div {background-image: url('images/bg.jpg');
}
设置图片路径
路径可以是相对路径、绝对路径或网络地址：
立即学习“前端免费学习笔记（深入）”；
-
相对路径：相对于当前CSS文件的位置，如
url(../images/banner.png) -
绝对路径：从网站根目录开始，如
url(/assets/img/photo.jpg) -
网络地址：适用于在线图片，如
url(https://example.com/bg.jpg)
常用配合属性
单独使用 background-image 可能不够，通常还需设置以下属性来优化显示效果：
-
background-repeat：控制是否平铺，常用值
no-repeat -
background-size：设置背景图大小，如
cover（充满容器）或100% 100%（拉伸填满） -
background-position：定位图片位置，如
center居中显示 -
background-attachment：是否随滚动，如
fixed实现视差效果
示例：
div {background-image: url('bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
简写形式
可以使用 background 简写属性一次性设置多个选项：
div {background: url('bg.jpg') no-repeat center/cover;
}
其中 center/cover 表示 position / size 的简写方式。
基本上就这些。只要路径正确，并合理设置重复、尺寸和位置，背景图就能正常显示。不复杂但容易忽略细节。
