如何使用CSS和HTML实现背景图片在所有设备上固定位置显示

解决方案 #

你当前背景使用固定像素值定义位置和尺寸，不同宽度的设备下会和内部居中的内容容器发生偏移，只需调整.main-block的CSS属性即可实现全设备下背景位置固定的效果：

修改后的CSS代码

.main-block{
     background-image: url(https://i.ibb.co/B6xfnvz/falka-1.png);
     background-repeat: no-repeat;
     /* 计算水平位置，始终对齐内部居中容器的右上角 */
     background-position: calc(50% + 408px) 0;
     background-size: 1085px 1016px;
     min-height: 1080px;
     height: auto;
     /* 小屏适配，背景等比缩放避免溢出 */
     @media (max-width: 1900px) {
       background-size: 55vw auto;
     }
}

调整说明

• 移除了原来固定的265px左偏移，改用calc(50% + 408px)计算水平位置：50%对应视口水平中线，408px是内部容器.main-block_inner最大宽度816px的一半，调整后背景始终和内部内容容器保持固定相对位置，不受屏幕宽度影响
• 把固定高度替换为min-height，避免内容高度超出时被容器截断
• 新增媒体查询规则，小屏设备下背景按视口宽度等比缩放，不会超出显示区域

内容的提问来源于stack exchange，提问作者The Dead Man