11

私は自分のウェブサイトに素敵なフルスクリーン画像の背景を取得しようとしています。私がテストしたほとんどすべてのブラウザー (browsershots.org) では問題なく動作しますが、Android タブレットの Chrome では期待どおりに動作しません。ご覧のとおり、背景には白がたくさんありますが、すべて画像である必要があります。

リンク : http://test.socie.nl

CSS :

body {
    background: url(../../images/background/image1.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

予期しない結果:

4

5 に答える 5

2

上記の方法に更新があります (こちらで公開されています)。

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

更新にもかかわらず、元の質問の問題は引き続き発生しますが。私にとってうまくいったのは、上記に加えて、html CSSに全幅と高さを追加することでした:

html {
    width: 100%;
    height: 100%
}
于 2014-10-25T18:25:00.307 に答える
0

htmlタグを使用して追加する場合、実際に必要なものはすべて:

height: 100%;

...メニューバーをスクロールして表示から外すと、画像のサイズが少し変更されるという警告がありますが、他のすべての回答にもその問題があると思います。

于 2016-07-12T10:46:46.990 に答える
0

背景画像の代わりに、<img>代わりに使用してみてください。

HTML :

<img src="imagepath" id="your-id" />

CSS :

#your-id{
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -999;
}
于 2012-12-05T10:39:17.363 に答える