使用background-image可为元素添加背景图，需配合background-repeat、background-size、background-position和background-attachment等属性控制显示效果，正确设置路径和尺寸可实现自适应美观布局。
使用CSS的background-image属性可以为元素设置背景图片。这个属性非常实用，常用于给网页的body、header、卡片或按钮等添加视觉效果。
基本语法
background-image 属性的基本写法如下：
background-image: url('图片路径');其中，url() 中填写图片的路径，可以是相对路径、绝对路径或网络地址。
常用设置方式
实际使用中，通常还会配合其他背景属性来优化显示效果：
立即学习“前端免费学习笔记（深入）”；
- background-repeat：控制图片是否重复，默认会平铺。
-
background-size：设置图片大小，如
cover或contain。 - background-position：定义图片在容器中的位置，比如居中。
-
background-attachment：设置背景是否随页面滚动（如固定背景用
fixed）。
一个完整的例子：
.container {background-image: url('images/bg.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
注意事项
确保图片路径正确，否则背景图不会显示。如果使用相对路径，要相对于CSS文件的位置来写。建议使用常见格式如 JPG、PNG 或 WebP。
对于响应式设计，推荐使用 background-size: cover 让图片自适应容器大小，避免变形或留白。
