如何在容器尺寸变化时将背景图固定在容器顶部？

目前PC端背景图的上半部分被裁切，需要实现容器尺寸变化时，背景图的上半部分始终保持可见。

效果对比 #

• PC端当前效果
  
• 移动端效果
  

当前CSS代码 #

.about-img.n3 {
  background: url("../images/3.png");
  border-radius: 0 0 20px 20px;
}
.about-img {
  padding: 10vh 0;
  background-blend-mode: luminosity !important;
  background-color: #f0f8ff !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  color: #f0f8ff;
  font-weight: 800;
  min-height: 0 !important;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}

解决方案 #

问题核心在于background-position: center !important;，该属性会让背景图始终居中显示，当容器高度增加（如PC端）时，上下部分会被裁切。要让上半部分始终可见，只需将背景位置改为顶部对齐：

修改.about-img中的background-position属性：

background-position: top center !important;

使用top center后，背景图会始终以顶部为基准对齐，容器尺寸变化时只会裁切背景图的底部区域，上半部分将保持可见。

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