Question

我正在制作一个页面，其布局分为3个部分：页眉，主体和页脚。我想要在我的主体中有一个背景图像。现在，当我尝试这样做时，我遇到了一个问题。图像未覆盖整个区域。它在底部留下了一些区域。请查看此fiddle以获取正确的解释。

这是我到目前为止所做的：

HTML

<html>
    <head>
        <title>Gehri Route: Login, Signup</title>
    </head>
    <body>
           <div class='headercontainer'>
                      <div class='header'>
                          header
                      </div>
            </div>
            <div class='mainbodycontainer'>
                     </div>
            <div class = 'footercontainer'>

                         <div class='footer'>
                               footer
                        </div>
            </div>
        </body>
</html>

CSS

body
{
    background-color: rgb(250,250,250);
    margin: 0;
    padding: 0;
}

.headercontainer
{
  background-color: rgb(245,245,245);
  min-width: 999px;
  height:60px;
  border:1px solid #666;
  left: 0;
}

.mainbodycontainer
{
  margin: 0 auto;
  overflow: auto;
  background-color: rgb(250,250,250);
  min-width: 999px;
  padding: 80px 0;
        background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.footercontainer
{
  background-color: rgb(245,245,245);
  width: 100%;
  height:82px;
  border: 1px solid #666;
  left:0;
  position: fixed;
  bottom: 0;
}

.header
{
        margin: 0px auto;
        width: 999px;
}



.mainbody
{
  margin: 0px auto;
  width: 999px;
}

另外请帮我制作这种响应式设计。

Answer 1

你需要强制身高和html标签100％。如果没有内容，则不会显示背景，因为元素（.mainbodycontainer）的高度为0.在您的情况下，它是80px，因为您应用了填充。

检查这个小提琴。 http://jsfiddle.net/olwez/ncLZN/

我向.mainbodycontainer div添加了一个身高和html标签的高度为100％，最小高度为100％。这样您就不必手动设置高度或在.mainbodycontainer中包含内容，以使图像按照您的意愿运行。

我只是扔了一个溢出物：隐藏;在body标签上，以便滚动消失。

这是完整的CSS。

html { height: 100% }
body
{
    background-color: rgb(250,250,250);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.headercontainer
{
  background-color: rgb(245,245,245);
  min-width: 999px;
  height:60px;
  border:1px solid #666;
  left: 0;
}

.mainbodycontainer
{
  margin: 0 auto;
  overflow: auto;
  background-color: rgb(250,250,250);
  min-width: 999px;
  min-height: 100%;
        background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


.footercontainer
{
  background-color: rgb(245,245,245);
  width: 100%;
  height:82px;
  border: 1px solid #666;
  left:0;
  position: fixed;
  bottom: 0;
}

.header
{
        margin: 0px auto;
        width: 999px;
}



.mainbody
{
  margin: 0px auto;
  width: 999px;
}

Answer 2

将此添加到您的风格中：

    width:600px;
    height:450px;


.mainbodycontainer
 {
   margin: 0 auto;
   overflow: auto;
   background-color: rgb(250,250,250);
   min-width: 999px;
   padding: 80px 0;
    background: url("http://images.nationalgeographic.com/wpf/media-live/photos/000/107/cache/california-profile_10719_600x450.jpg?01AD=3Eg20HvemHwApI8-INwZvViX_nk9hW8HJTh_oBQchW4pJwAzYLvxz9w&01RI=A8733DF327AC3E9&01NA=na") no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   width:600px;
   height:450px;

}

http://jsfiddle.net/QcUfm/9/

Answer 3

背景图片仅显示内容或高度显示的内容。如果你的div没有足够的内容来强制父元素足够大，你就不会看到它。此外，如果您使用任何类型的定位，如固定，绝对或甚至相对并移动它，也会影响它。我没有看小提琴，但这些是一些常见的问题。

页眉和页脚之间区域的背景图像

3 个答案: