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

时间:2013-07-19 16:43:06

标签: html css responsive-design

我正在制作一个页面,其布局分为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;
}

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

3 个答案:

答案 0 :(得分:3)

你需要强制身高和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;
}

答案 1 :(得分: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/

答案 2 :(得分:0)

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