Html 如何在网页中制作全屏背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10869739/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make full screen background in a web page
提问by Adham
How to make an image as background for web page, regardless of the screen size displaying this web page? I want to display it properly. How?
无论显示此网页的屏幕大小如何，如何将图像作为网页的背景？我想正确显示它。如何？
采纳答案by doptrois
回答by Shivam
its very simple use this css (replace image.jpg with your background image)
使用这个 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')";
}
回答by str8
um why not just set an image to the bottom layer and forgo all the annoyances
嗯，为什么不只是将图像设置到底层并放弃所有烦恼
<img src='yourmom.png' style='position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:-1;'>
回答by Muneeb Siddiqui
Use this CSS to make full screen backgound in a web page.
使用此 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;
}
回答by Arvind Shokal
Use the following code in your CSS
在您的 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;
}回答by Hayd
CSS
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
HTML
<!doctype html>
<html class="h-100">
.
.
.
<body class="bbg">
</body>
.
.
.
</html>
回答by ZaMy
I have followed this tutorial: https://css-tricks.com/perfect-full-page-background-image/
我遵循了本教程：https: //css-tricks.com/perfect-full-page-background-image/
Specifically, the first Demowas the one that helped me out a lot!
具体来说，第一个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;
}
this might help!
这可能会有所帮助！
回答by PokerFace
I found the reason why there is always a white boder of the background image, if I put the image in a 'div' element inside 'body'. But the image can be full screen, if I put it as background image of 'body'.
如果我将图像放在“body”内的“div”元素中，我找到了背景图像总是有白色边框的原因。但是图像可以是全屏的，如果我把它作为“身体”的背景图像。
Because the default 'margin' of 'body' is not zero. After add this css, the background image can be full screen even I put it in 'div'.
因为 'body' 的默认 'margin' 不为零。添加此 css 后，即使我将其放在“div”中，背景图像也可以全屏显示。
body {
margin: 0px;
}
回答by arttronics
A quick search for keywords background generatorshows this CSS3 producedbackground pattern that's dynamically created.
快速搜索关键字背景生成器显示了动态创建的此CSS3 生成的背景图案。
By keeping the image small and repeatable, you won't have problems with it loading on mobile devices and the small image file-sizetakes care of memory concerns.
通过保持图像小且可重复，在移动设备上加载它不会有问题，并且小图像文件大小可以解决内存问题。
Here's the markup for the headsection:
这是该head部分的标记：
<style type="text/css">
body {
background-image:url('path/to/your/image/background.png');
width: 100%;
height: 100%;
}
</style>
If your going to use an image of something that should preserve aspect ratio, such as people or objects, then you don't want 100%for width and height since that will stretch the image out of proportion. Instead check out this quick tutorialthat shows different methods for applying background images using CSS.
如果您要使用应该保留纵横比的图像，例如人或物体，那么您不希望宽度和高度为100%，因为这会使图像不成比例。而是查看这个快速教程，其中展示了使用 CSS 应用背景图像的不同方法。
回答by dotty
Make a div 100% wide and 100% high. Then set a background image.
制作一个 100% 宽和 100% 高的 div。然后设置背景图片。
