Question

我的背景图片应该只填充身体元素，但它占据了整个视口。我编辑了我原来的帖子，以摆脱无关的代码。我希望我在这里发布的内容足够但不会太多。基本上发生的事情是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>

Answer 1

Your background image is filling the entire viewport because the <body> element is weird like that. If no background is set on the <html> element, the background will fill the entire viewport.

Without setting the background property of the <html> property:

body {
  background: #f00;
}

<p>Text</p>

Setting the background property of the <html> element.

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

<p>Text</p>

Answer 2

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

填充全屏的背景图片不仅仅是身体

2 个答案: