Question

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

Answer 1

非常简单使用此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')";
}

Answer 2

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

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

Answer 3

通过jQuery插件;）

Answer 4

使用此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;
}

Answer 5

Use the following code in your 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:

Answer 6

将div设为100％宽和100％高。然后设置背景图像。

Answer 7

快速搜索关键字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应用背景图片的不同方法。

Answer 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>

Answer 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; 
}

这可能有帮助！

Answer 10

如果将图像放在“ body”中的“ div”元素中，我发现背景图像总是白底的原因。但是，如果我将其作为“身体”的背景图片，则该图片可以全屏显示。

因为“ body”的默认“ margin”不为零。添加此CSS之后，即使我将其放在“ div”中，背景图片也可以全屏显示。

body {
    margin: 0px;
}

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

10 个答案:

CSS

HTML