在 HTML 或正文上实现背景图像的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27939027/
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
best way to implement background image on HTML or body
提问by Srackoveryflow_guy
I have an image which i need to stretch whole body so i don't know what is best way to do this
我有一张图片，我需要拉伸整个身体，所以我不知道这样做的最佳方法是什么
html{
/*background image properties*/
}
or
或者
body{
/*background image properties*/
}
回答by Gerwin
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}
This would be the best way, you could apply it to the HTML, it really depends on what you prefer...
这将是最好的方法，您可以将其应用于 HTML，这实际上取决于您喜欢什么...
background-image:url('../images/background.jpg');
Assuming your css file is in a different map, you do ../ to go to the map in which your css folder is placed, then you go into the images file and select the image.
假设您的 css 文件位于不同的地图中，您可以执行 ../ 转到放置 css 文件夹的地图，然后进入图像文件并选择图像。
background-attachment:fixed;
When setting a background-image I personally like to use this, it makes it so that when a user scrolls, the background-image maintains it's current position.
在设置背景图像时，我个人喜欢使用它，这样当用户滚动时，背景图像保持其当前位置。
background-repeat: no-repeat;
When using this setting, it makes it so that the image won't repeat, in case it is too small or just won't cover the whole background.
使用此设置时，它会使图像不会重复，以防图像太小或无法覆盖整个背景。
background-size: cover;
When you apply this you will set the background-size to cover, combined with no-repeatand attachment: fixedit makes for a good way to style your background image
当你申请这个你设置的背景大小来覆盖，加之no-repeat和attachment: fixed它使一个很好的方式，以你的风格背景图片
回答by Abhitalks
As per the CSS 2.1 Specs here: http://www.w3.org/TR/CSS2/colors.html#background
根据此处的 CSS 2.1 规范：http: //www.w3.org/TR/CSS2/colors.html#background
For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element....
但是，对于 HTML 文档，我们建议作者为 BODY 元素而不是 HTML 元素指定背景。对于根元素是 HTML“HTML”元素或 XHTML“html”元素的文档，其 'background-color' 的计算值为 'transparent'，'background-image' 的值为 'none'，用户代理必须改为使用在为画布绘制背景时，从该元素的第一个 HTML“BODY”元素或 XHTML“body”元素子元素计算背景属性的值，并且不得为该子元素绘制背景......
Hence, it is recommendedto use a backgroundon body(rather than on html).
因此，建议使用backgroundon body（而不是 on html）。
If you want a background-imageto stretch the whole container (i.e. body), then you could use the style:
如果您想要background-image拉伸整个容器（即body），那么您可以使用以下样式：
background-size: 100% 100%;
If you want to preserve the aspect ratio, then you could use coverto make it cover the full container, or use containto keep it within the container boundary. When you use contain, then depending on the aspect ratio of the background image, you could end up with white-space below or after the image ends (letterbox).
如果要保留纵横比，则可以使用cover使其覆盖整个容器，或者使用contain将其保持在容器边界内。当您使用 时contain，根据背景图像的纵横比，您可能会在图像结束（信箱）下方或之后出现空白。
background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...
.
.
回答by Chameena Hiruni
body{
background-image:url('../images/background.jpg');
background-attachment:fixed;
background-repeat: no-repeat;
background-size: cover;
}回答by Naeem Shaikh
body{
/*background image properties*/
}
this would be the best way, since body is the immediate parent of all elements which are visible on the webpage.
这将是最好的方法，因为 body 是网页上所有可见元素的直接父元素。
You can use background-size:contain;to cover all the area with background image
您可以使用background-size:contain;背景图像覆盖所有区域
body{
width:500px;
height:500px;
background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
background-cover;
background-repeat:no-repeat;
}
Note: Also there is a case I think of:
注意：我还想到了一个案例：
<html>
<head>
some free data
</head>
<body>
</body>
</html>
here the some free datawill get displayed inside the webpage, i.e inside body, so we wouldnt care about giving the background property to html tag,
此处some free data将显示在网页内部，即 inside body，因此我们不会关心将 background 属性赋予html tag，
just using body{//background properties }is fine
只是用body{//background properties }是好的
Edit:
Though this is not the question for what property should be used here. There can be various things like:
虽然这不是这里应该使用什么属性的问题。可以有各种各样的事情，例如：
background-size:cover;
OR
background-contain;
OR
background-100% 100%;
The best property which suits your question would be background-100% 100%;
适合您问题的最佳属性是 background-100% 100%;
回答by ?zay Akba?
background:no-repeat url(' ') #154454 bottom center ;
background-size:contain;
body {
background-image: url(/_assets/img/zoom-17536689-3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
回答by Supriya
.bk
{
background: url('../assets/imgs/img.jpg') no-repeat center center fixed;
}回答by Bhojendra Rauniyar
Semantically, I would use in body.
在语义上，我会在 body 中使用。
body{
background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}
Seems to be applied in whole body semantically.
语义上似乎适用于全身。
回答by U r s u s
You should target the bodytag and apply the background-sizeproperty to it.
您应该定位body标记并将background-size属性应用到它。
Like so
像这样
body{
background-size: 100%;
}
回答by Ahosan Karim Asik
You can use
您可以使用
body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}
回答by ULLAS MOHAN.V
Try this code :
试试这个代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">
<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>
<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>
Example : Check this
示例：检查这个
