如何实现CSS背景图片固定？解决浏览器缩小时背景图尺寸变化及部分消失问题

嘿，我完全懂你遇到的糟心情况——浏览器窗口一缩小，背景图就跟着变形，甚至连部分内容都没了对吧？别慌，给你的CSS加个简单属性就能解决！

核心解决方案：添加background-attachment: fixed #

只需要在你的.contact样式里加上background-attachment: fixed，再补充个居中属性确保显示效果，修改后的代码如下：

.contact{ 
  position: relative; 
  min-height: 100vh; 
  padding: 50px 100px; 
  display: flex; 
  justify-content: center; 
  flex-direction: column; 
  background: url(pic.jpg); 
  background-size: cover; 
  background-attachment: fixed; /* 关键：让背景图固定在浏览器视口 */
  background-position: center center; /* 可选：确保图片始终居中显示 */
}

各属性的作用说明： #

• background-attachment: fixed：这个属性会让背景图绑定到浏览器视口，而不是跟着容器尺寸变化或页面滚动移动。不管你怎么缩放窗口，图片都会稳稳待在视口的固定位置，不会被容器的大小变化影响。
• background-size: cover：保留这个属性可以让图片始终覆盖整个容器区域，搭配fixed后，图片的缩放参考会变成视口而非容器本身，避免窗口缩小后图片被过度裁剪。
• background-position: center center：可选但很实用，确保图片在视口中始终居中，防止窗口缩小时图片边缘被裁掉导致内容丢失。

现在你再去缩放浏览器窗口试试，背景图就会牢牢固定住，再也不会跟着乱跑啦！

内容的提问来源于stack exchange，提问作者Mariam