在 HTML 或正文上实现背景图像的最佳方法答案

【问题标题】：best way to implement background image on HTML or body在 HTML 或正文上实现背景图像的最佳方法
【发布时间】：2026-02-01 01:45:02
【问题描述】：

我有一张图片需要拉伸整个身体，所以我不知道最好的方法是什么

html{
  /*background image properties*/
}

或

body{
  /*background image properties*/
}

【问题讨论】：

标签： html css

【解决方案1】：

body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

这将是最好的方法，你可以将它应用到 HTML，这真的取决于你喜欢什么......

background-image:url('../images/background.jpg');

假设您的 css 文件位于不同的地图中，您执行 ../ 以转到放置 css 文件夹的地图，然后进入图像文件并选择图像。

background-attachment:fixed;

在设置背景图像时，我个人喜欢使用它，这样当用户滚动时，背景图像会保持其当前位置。

background-repeat: no-repeat;

当使用此设置时，它可以使图像不会重复，以防它太小或无法覆盖整个背景。

background-size: cover;

当您应用此选项时，您会将背景大小设置为覆盖，并结合 no-repeat 和 attachment: fixed 它是设置背景图像样式的好方法

【讨论】：

嗨 Gerwin，我正在使用你的 css 样式。但是图像在桌面上变得扭曲。图像大小为 9MB，尺寸为 3250*2164。我希望这张图片完美地适合屏幕背景而不会出现任何失真。我需要哪些附加属性？
@Lokesh 嘿伙计，图像的分辨率是多少？可能是由于以下原因导致图像变形/变形：1. 图像无法缩放到设备分辨率或相反，2. 图像被编辑者损坏/损坏，或者 3. 图像本身是扭曲/扭曲，祝你好运！
嗨格温，图像宽 3250 像素，高 2164 像素。图像能够缩放到设备分辨率。我在切换设备工具栏中对其进行了测试。
@Lokesh 屏幕有多大？
屏幕为1366x768

【解决方案2】：

根据此处的 CSS 2.1 规范：http://www.w3.org/TR/CSS2/colors.html#background

但是，对于 HTML 文档，我们建议作者指定 BODY 元素而不是 HTML 元素的背景。为了根元素是 HTML“HTML”元素或 XHTML 的文档 “html”元素的计算值为“透明” 'background-color' 和 'none' 对于 'background-image'，用户代理必须而是使用该背景属性的计算值元素的第一个 HTML“BODY”元素或 XHTML“body”元素的子元素为画布绘制背景，不得绘制背景对于那个子元素....

因此，建议在body（而不是html）上使用background。

如果您希望background-image 拉伸整个容器（即body），那么您可以使用以下样式：

background-size: 100% 100%;

如果您想保留纵横比，则可以使用cover 使其覆盖整个容器，或使用contain 使其保持在容器边界内。当您使用contain 时，根据背景图片的纵横比，您可能会在图片下方或之后出现空白（信箱）。

background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...

.

【讨论】：

嗨 Abhitalks，我正在使用你的 css 样式。但是图像在桌面上变得扭曲。图像大小为 9MB，尺寸为 3250*2164。我希望这张图片完美地适合屏幕背景而不会出现任何失真。我需要哪些附加属性？

【解决方案3】：

body{
  /*background image properties*/
}

这是最好的方法，因为 body 是网页上所有可见元素的直接父级。

http://jsfiddle.net/hxyz2evq/

您可以使用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;
}

注意：还有一个我想到的案例：

<html>
    <head>
        some free data
    </head>
    <body>

    </body>
</html>

这里some free data会显示在网页内部，即body内部，所以我们不会关心将背景属性赋予html tag，

只使用body{//background properties } 就可以了

Edit:

虽然这不是这里应该使用什么属性的问题。可以有各种各样的东西，例如：

background-size:cover;
OR
background-contain;
OR
background-100% 100%;

最适合您问题的属性是background-100% 100%;

【讨论】：

应该是background-size:cover，不是吗？
如果你使用background-100% 100%; 会拉伸背景图片

【解决方案4】：

body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

【讨论】：

【解决方案5】：

在语义上，我会在正文中使用。

body{
  background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}

似乎在语义上适用于全身。

【讨论】：

【解决方案6】：

您应该定位body 标记并将background-size 属性应用于它。

像这样

body{
background-size: 100%;
}

【讨论】：

【解决方案7】：

你可以使用

body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}

【讨论】：

【解决方案8】：

试试这个代码：

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

例如：Check this

【讨论】：

【解决方案9】：

CSS3 background-size:cover 属性可以很好地处理全屏背景图像，包括响应性。以下内容适用于我测试过的所有桌面和移动设备。

body { 
    background-image: url(/assets/img/yourimage.jpg); 
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    width:100%; 
}

【讨论】：

【解决方案10】：

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

【讨论】：

虽然您所写的内容可能会回答这个问题，但它在explanation 中似乎确实有些欠缺，并且可能会给其他用户造成非法混淆。您能否扩展您的答案，使其更清晰、更易于理解？这将提供更好的答案，并帮助未来的用户了解问题是如何解决的。
我使用的是英文翻译，这可能会误导您。我只能对编码进行更正。

【解决方案11】：

.bk
{
  background: url('../assets/imgs/img.jpg') no-repeat center center fixed;
  }

【讨论】：