用 background-image 配合 background-size: cover 可实现全屏背景，需设 html 和 body 高度为 100%、清除边距，并推荐加 background-attachment: fixed 实现视差效果；适配移动端需用高分辨率图或 @2x 版本、媒体查询切换及 background-color 占位。

用 CSS 的 background-image 配合 background-size: cover 就能轻松实现图片全屏背景，HTML 本身不直接设置背景，关键在样式控制。

基础全屏背景写法（推荐）

把图片设为 body 或一个全屏容器的背景，确保它覆盖整个视口：

• 给 html 和 body 设为 100% 高度，消除默认边距
• 用 background-size: cover 让图片等比缩放并填满屏幕
• 加 background-attachment: fixed 可选，实现视差滚动效果

示例代码：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<p>body {
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll; /<em> 或 fixed </em>/
}</p>

适配移动端与高清屏的小技巧

单纯用一张图可能在手机或 Retina 屏上模糊，建议：

• 使用高分辨率图片（如 2560×1440 以上），或提供 @2x 版本
• 用 background-image 的媒体查询做响应式切换
• 加 background-color 作为图片加载前的占位底色

避免常见问题

全屏背景容易出错的地方：

• 忘记设 html, body { height: 100% } → 背景只显示内容高度部分
• 图片太小或比例严重失配 → 出现拉伸/留白，cover 比 contain 更适合全屏
• 文字看不清 → 给文字加半透明遮罩层（如伪元素 + rgba 背景）或调整字体颜色对比度

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！