【问题标题】：How to display a gif fullscreen for a webpage background?如何为网页背景显示 gif 全屏？
【发布时间】：2014-03-02 15:45:57
【问题描述】：

我正在尝试使 GIF 适合我的整个屏幕，但到目前为止它只是我屏幕上的一个小方块，而其余部分是白色的。但是，我希望它占据所有空间。

有什么想法吗？

【问题讨论】：

stackoverflow.com/questions/376253/… 的副本？

标签： html css gif

【解决方案1】：

如果是背景，请使用background-size: cover;

body{
    background-image: url('http://i.stack.imgur.com/kx8MT.gif');
    background-size: cover;
    
    
    
    height: 100vh;
    padding:0;
    margin:0;
}

【讨论】：

【解决方案2】：

IMG方法

如果您希望图像成为独立元素，请使用以下 CSS：

#selector {
    width:100%;
    height:100%;
}

使用此 HTML：

<img src='folder/image.gif' id='selector'/>

Fiddle

请注意，img 标签只能在 body 标签内。如果它在其他任何东西中，它可能不会根据其他元素属性填充整个屏幕。如果页面高于图像，此方法也将不起作用。它将留下空白。这就是后台方法的用武之地

背景图片法

如果你想让它成为你页面的背景图片，你可以使用这个 CSS：

body {
    background-image:url('folder/image.gif');
    background-size:100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
    height:100%;
    width:100%;
}

Fiddle

或简写版本：

body {
    background:url('folder/image.gif') repeat-y 100% 100% fixed;
    height:100%;
    width:100%;
}

Fiddle

【讨论】：

我可以通过 img src 我的 gif 将其添加进去吗？
@user3264048 见编辑。有多种方法可以解决这个问题。
@user3264048 为我定义“不占用全屏”。我现在正在制作一些小提琴作为演示。
gif 在我的屏幕右侧，像一个中等大小的矩形。
@user3264048 您能否在您的问题或小提琴中发布您的 HTML 的其余部分？我认为还有其他因素影响您的形象。

【解决方案3】：

您可以使用您的 GIF 文件设置背景，并以这种方式设置正文：

body{
background-image:url('http://www.example.com/yourfile.gif');
background-position: center;
background-size: cover;
}

使用您的 GIF 更改背景图片 URL。使用background-position: center，您可以将图像放在中心，使用background-size: cover，您可以将图片设置为适合整个屏幕。也可以设置background-size: contain，如果你想把图片100%地放在屏幕上，但又不让图片的任何部分不显示。

希望对你有帮助:)

【讨论】：

MDN 比 w3schools 可靠得多。
谢谢@zsaat14！我不知道 MDN 有那个参考指南！我会收藏它:)
不占满屏
检查将width:100%和height:100%添加到body是否有效

【解决方案4】：

如果您愿意将其用作背景图片和 CSS3，那么 background-size: cover; 就可以了

【讨论】：

【解决方案5】：

这应该可以满足您的需求。

CSS：

html, body {
    height: 100%;
    margin: 0;
}

.gif-container {
  background: url("image.gif") center;
  background-size: cover;

  height: 100%;
}

HTML：

<div class="gif-container"></div>

【讨论】：

【解决方案6】：

在你的 CSS 样式标签中放这个：

body {
  background: url('yourgif.gif') no-repeat center center fixed;
  background-size: cover;
}

【讨论】：

【解决方案7】：

还要确保它的父级大小为 100%

【讨论】：