背景图像填充全屏而不仅仅是身体答案

【问题标题】：background image filling full screen not just body背景图像填充全屏而不仅仅是身体
【发布时间】：2016-12-02 04:10:56
【问题描述】：

我的背景图片应该只是填充 body 元素，但它占据了整个视口。我已经编辑了我的原始帖子以摆脱无关代码。我希望我在这里发布的内容足够但不要太多。基本上发生的事情是 html 的背景颜色填满了屏幕，而正文中的背景图像没有显示。任何帮助将不胜感激。

html {background: #95A3C2;}
body {
background-image: url(_images/pg_p_lewis_bckgrnd.jpg);
width: 960px;
margin: 0 auto 0;
font-size: 1.1em;
line-height: 1.3em;
font-family: "minion-pro";
}

<body>
<div id="main">
<div class="text">
<p>text</p>
</div>
<div class="image">
<p>Image Gallery</p>
<p><span class="caption">Center image vertically on page and hover to enlarge.</span></p>
<p><img class="img-zoom" src="_images/RL_LEWIS_Alex_KCC_1197_Sur_1.jpg" class="img-thumbnail" alt="lewis land grant" width="259" height="387"></p>
</div>
</div>
<script src="jquery.js"></script>  
<script> 
$(document).ready(function(){
$('.img-zoom').hover(function() {
$(this).addClass('transition');

    }, function() {
        $(this).removeClass('transition');
    });
  });

</script>
</body>
</html>

【问题讨论】：

你有这么多的代码，很难说出你想要做什么。理想情况下，您的问题应该比代码包含更多的非代码。见How to create a Minimal, Complete, and Verifiable example
背景尺寸？为什么你没有在你的身体里输入背景尺寸？
我尝试添加背景大小，但我遇到了同样的问题 - html 颜色显示为整个屏幕，而背景图像未显示在正文中。

标签： html css image background

【解决方案1】：

你的背景图片填满了整个视口，因为 <body> 元素很奇怪。如果<html> 元素上没有设置背景，则背景将填满整个视口。

不设置<html>属性的背景属性：

body {
  background: #f00;
}

&lt;p&gt;Text&lt;/p&gt;

设置<html> 元素的背景属性。

body {
  background: #f00;
}
html {
  background: #fff;
}

&lt;p&gt;Text&lt;/p&gt;

【讨论】：

谢谢。但是，如果您像在此处所做的那样向 html 添加颜色，该颜色会显示整个屏幕，包括正文，而背景图像根本不会显示在正文中。
@BartonLewis 如果你能提供一个 simple 示例表明我可以提供帮助，我似乎无法重现你的问题。
我减少了实际页面上的内容，但很难知道要省略多少，因为我不知道是我的 html 结构还是其他原因导致背景颜色覆盖背景图像。该图像与 html 位于不同的文件夹中，但由于 css 位于文档中，而不是外部样式表中，我认为这不是问题。抱歉，如果这不是您需要的，感谢您提供帮助。

【解决方案2】：

我添加了一个部分标签来包围我的 div，现在背景图像正在显示，并且 html 的背景颜色是它应该在的位置。不知道为什么会这样，但确实有效。

【讨论】：