如何在网页中制作全屏背景答案

【问题标题】：How to make full screen background in a web page如何在网页中制作全屏背景
【发布时间】：2012-06-07 20:14:37
【问题描述】：

无论显示此网页的屏幕大小如何，如何将图像作为网页背景？我想正确显示它。怎么样？

【问题讨论】：

标签： html css web

【解决方案1】：

将 div 设为 100% 宽和 100% 高。然后设置背景图片。

【讨论】：

【解决方案2】：

通过 jQuery 插件 ;)

【讨论】：

【解决方案3】：

快速搜索关键字 background generator 会显示此动态创建的 CSS3 produced 背景图案。

通过保持图像小且可重复，您在移动设备上加载时不会遇到问题，而且小的 图像文件大小 可以解决内存问题。

这是head 部分的标记：

<style type="text/css">

    body {
      background-image:url('path/to/your/image/background.png');
      width: 100%;
      height: 100%;
    }

</style>

如果您要使用应保留纵横比的图像，例如人物或物体，那么 您不希望宽度和高度为 100%因为这会使图像不成比例地拉伸。请查看此 quick tutorial，它展示了使用 CSS 应用背景图像的不同方法。

【讨论】：

【解决方案4】：

非常简单使用这个 css（用你的背景图片替换 image.jpg）

body{height:100%;
   width:100%;
   background-image:url(image.jpg);/*your background image*/  
   background-repeat:no-repeat;/*we want to have one single image not a repeated one*/  
   background-size:cover;/*this sets the image to fullscreen covering the whole screen*/  
   /*css hack for ie*/     
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.image.jpg',sizingMethod='scale');
   -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.jpg',sizingMethod='scale')";
}

【讨论】：

【解决方案5】：

嗯，为什么不将图像设置到底层并放弃所有烦恼

<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>

【讨论】：

@str8：因为拉伸？只是说。
完美，解决了我的问题！谢谢

【解决方案6】：

在您的 CSS 中使用以下代码

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

here's the link where i found it:

【讨论】：

【解决方案7】：

使用此 CSS 在网页中制作全屏背景。

body {
    margin:0;
    padding:0;
    background:url("https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

【讨论】：

【解决方案8】：

CSS

.bbg { 
    /* The image used */
    background-image: url('...');

    /* Full height */
    height: 100%; 

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

HTML

<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>

【讨论】：

【解决方案9】：

我已按照本教程进行操作：https://css-tricks.com/perfect-full-page-background-image/

具体来说，第一个Demo对我帮助很大！

CSS
 {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
}

这可能会有所帮助！

【讨论】：

【解决方案10】：

如果我将图像放在“body”内的“div”元素中，我发现了背景图像总是有白边的原因。但是如果我把它作为'body'的背景图像，图像可以是全屏的。

因为 'body' 的默认 'margin' 不为零。添加这个css后，即使我把它放在'div'中，背景图片也可以全屏。

body {
    margin: 0px;
}

【讨论】：