5

レスポンシブ デザインのビューポートにも使用できる流動的なテンプレートをセットアップしようとしています。ただし、ブラウザ ウィンドウのサイズを変更しようとすると、サイズが変更されず、iPhone ではヘッダー グラフィックの左上部分だけが表示されます。メイン ラッパーの背景とヘッダーのアニメーション GIF があり、どちらも同じ幅 1200px です。どんな助けでも大歓迎です。

ビューポート

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS

body {
    background-color: #B28D66;
    margin: 0 auto;
}
#Wrapper {
    max-width:1200px;
    width:95%;
    background-image: url(../img/background_main.jpg);
    background-repeat: no-repeat scroll;
    background-position: center top;
    height: 2200px;
    position: relative;
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#Wrapper #Banner {
    width: 100%;
    height: 350px;
    background-image: url(../img/animated-gif-header.gif);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#Wrapper #Content {
    width: 75%;
    margin: 0 auto;
}
#Wrapper #MainNav {
    background-image: url(../img/nav_bar.png);
    width: 100%;
    height: 75px;
    margin-top: -20px;
}
#Wrapper #MainNav ul {
    margin-right: 100px;

}

#Wrapper #MainNav ul li {
    float: right;
    margin-top: 15px;
    padding-right: 21px;
4

3 に答える 3

8

次の方法でbackground-sizeプロパティを使用してみてください。

background-size:100% auto;

または、高さがページ全体の高さをカバーするようにしたい場合は、以下を使用してください

背景サイズ:自動 100%;

于 2013-03-23T15:03:42.737 に答える
2 
background-image: url('');
background: no-repeat center center cover;

これは通常うまくいきます。

于 2014-05-21T10:30:50.997 に答える
2 
background-size: cover;

私にとってはうまくいきます。

于 2013-12-09T06:39:57.260 に答える