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

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 に答える