填充全屏不只是身体的背景图像

问题描述：

我的背景图像应该只填充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>

你有太多的代码，难以置信地告诉你正在尝试做什么。理想情况下，你的问题应该比代码更多的非代码。请参见[如何创建最小，完整和可验证的示例]（http://stackoverflow.com/help/mcve） – Gerrit0

background-size？为什么你没有在你的身体中输入背景大小？ – Obink

我尝试添加一个背景大小，但我有同样的问题 - HTML颜色显示整个屏幕和背景图像不显示在正文中。 –

答

你的背景图像填充整个视，因为<body>元素很奇怪这样。如果在<html>元素上没有设置背景，背景将填充整个视口。

没有设置<html>属性的背景属性：

body { 
 
    background: #f00; 
 
}

<p>Text</p>

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

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

<p>Text</p>

谢谢。但是，如果您像在这里一样添加一种颜色到颜色为整个屏幕显示的html（包括在主体中），并且背景图像根本不在主体中显示。 –

@BartonLewis如果你能提供一个*简单*的例子，表明我可以提供帮助，我似乎无法重现你的问题。 – Gerrit0

我减少了我的实际页面上的内容，但很难知道要省略多少，因为我不知道它是否是我的html结构或其他原因使背景颜色覆盖背景图像。图像与html不同，但是由于css位于文档中，而不是外部样式表，我不认为这是问题。对不起，如果这不是你所需要的，并感谢你的帮助。 –

答

我增加了一节标签附上我的div的和现在的背景图像显示以及用于在HTML背景颜色，它应该是。不知道为什么这有效，但它确实。

填充全屏不只是身体的背景图像

相关推荐