进入全屏时背景GIF图片放大问题的技术咨询

问题：将一张GIF图片设置为页面背景，但进入全屏模式时，背景GIF会被放大，显示尺寸过大。请问是否可以让该GIF在页面分辨率变化时保持固定尺寸？

原使用的CSS代码：

.bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("space.gif");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

问题原因 #

你用的background-size: cover会强制背景图片拉伸或缩放，确保完全覆盖容器区域，这就是全屏时GIF被过度放大的核心原因。加上background-attachment: fixed让背景相对视口固定，分辨率变化时就会触发强制铺满的缩放逻辑。

解决方案 #

要让GIF保持固定尺寸，只需要调整background-size属性，同时优化定位设置：

• 方案1：保留GIF原始尺寸
  如果想直接用GIF本身的原始尺寸，把background-size: cover改成background-size: auto，同时添加background-repeat: no-repeat避免图片平铺：

.bg {
    position: fixed; /* 改用fixed固定在视口，不受页面滚动影响 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("space.gif");
    background-size: auto; /* 保持图片原始尺寸 */
    background-position: center; /* 可根据需求改成left top/right bottom等 */
    background-repeat: no-repeat;
    background-attachment: fixed;
}

• 方案2：自定义固定尺寸
  如果需要指定特定的固定尺寸，直接给background-size设置具体宽高值即可，比如800px 600px，这样无论视口怎么变化，图片都会维持这个尺寸：

.bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url("space.gif");
    background-size: 800px 600px; /* 自定义固定尺寸 */
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

额外提示 #

如果希望背景GIF固定在页面某个角落（比如右下角），只需要把background-position改成right bottom即可，视口变化时图片位置也不会改变。

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