设计稿上头图是 1920 宽的大图，写进页面后小屏上要么被裁得只剩一角，要么右边空出一大条。十有八九是 background-size 没设，默认 auto 按图片原始尺寸铺，容器多小都无所谓。css 背景图的几个属性搞明白，这类问题基本绝迹。
核心四件套
background-image 指定图片，url() 里路径不加引号也能用；background-repeat 默认 repeat 会平铺，一般改 no-repeat；background-position 控制位置，center 最常用；background-size 是关键，cover 表示铺满容器、超出部分裁掉，contain 表示完整显示、可能留白。要铺满且不变形用 cover，要看到整张图用 contain，没有两全的。另外 background-color 可以当兜底，图没加载出来时页面不至于刺眼。
写全可以用简写：background: url(images/bg.jpg) no-repeat center/cover; 注意简写里 position 和 size 之间要加斜杠，直接写 center cover 浏览器不认。
三个高频坑
第一是路径：CSS 文件里的相对路径，参照物是 CSS 文件自己，不是 HTML 页面。样式文件在 css 目录、图片在 images 目录，就要写 url(../images/bg.jpg)，照着页面里的路径抄，控制台直接报 404。
第二是高分屏发虚：2 倍屏上放 1 倍图必然糊，背景图按 2 倍尺寸出图。第三是移动端 background-attachment: fixed 在 iOS 上基本不生效，做视差别依赖它，用绝对定位的图加滚动监听更稳。
渐变叠加和多重背景
想在图上压一层暗色方便放文字，多重背景直接写：background-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)), url(banner.jpg); 渐变写在前面就在图上面，顺序反了什么都看不见。
调 css 背景图拿不准效果时，F12 里勾选元素逐个开关这几个属性，比查资料快。