在现代网页设计中，全屏背景图（full-page background image）是提升视觉吸引力的常用手段。然而，如何让背景图完美地自适应不同尺寸的浏览器视口，同时避免图片裁剪、留白或变形，是许多初学者乃至经验丰富的开发者都会遇到的挑战。常见的background-size属性值如cover和contain，虽然功能强大，但在特定需求下可能无法达到预期效果。例如，cover属性会确保背景图完全覆盖元素，但可能会裁剪掉图片的部分边缘；而contain属性则会确保图片完整显示，但当图片与元素比例不符时，可能会在两侧或上下留下空白区域。
核心解决方案：background-size: 100% 100%
针对需要背景图完全拉伸以填充整个视口，无论视口比例如何变化的场景，CSS提供了一个直接且有效的解决方案：background-size: 100% 100%;。这个属性值强制背景图的宽度和高度都拉伸至其容器的100%，从而实现完全填充。
代码示例
要将背景图设置为全屏并完全填充视口，通常将这些CSS属性应用于html或body元素。考虑到html元素通常代表整个文档的根，将其设置为背景容器更为常见。
全屏背景图示例