2

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

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

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

也请帮我做这个响应式设计。

4

3 回答 3

3

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

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

我为 body 和 html 标记添加了 100% 的高度和 .mainbodycontainer div 的 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;
}
于 2013-07-19T17:03:20.250 回答
0

将此添加到您的样式中：

    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/

于 2013-07-19T16:54:58.863 回答
0

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

于 2013-07-19T16:57:04.617 回答