0

サイトに十分な大きさの背景画像がありますが、テーブルを使用して表示すると、画像が画面全体をカバーしていません。下部に灰色の背景（ブラウザによって生成されたと思います）が表示されます。また、マイページの記事を展開すると高さは上がるが画像は中央に寄らない

これは私がテストしているサイトです: http://www3.carleton.ca/clubs/sissa/html5/

CSS:

body{
    width: 100%; /*always specify this when using flexBox*/ 
    height:100%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    text-align:center;
    -webkit-box-pack:center; /*way of centering the website*/
    -moz-box-pack:center;
    box-pack:center;
    background:url('images/bg/bg14.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

ここに画像の説明を入力

4

3 に答える 3

3

ルール-webkit-background-size: coverを次のように変更して、この問題を解決しました-webkit-background-size: cover !important

これまでのところうまくいくようです。

于 2013-04-03T20:56:59.640 に答える
0

HTMLに高さと幅を設定することで解決策を見つけました。他のソリューションでは、Nexus 10 の画面が背景でいっぱいになりません。

html { 
    background: url(backgroundImg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    width: 100%;
}

iPad で問題が発生した場合は、それらの !important を追加してみます。なしで行けるかどうかを確認したいだけです。

于 2013-10-31T16:36:18.023 に答える
0

でパーセンテージを使用すると、より多くの成功を収めましたbackground-size。

element {
  background:url(xyz.jpg) no-repeat center center;
  background-size:100% 100%;
  /* OR */
  background-size:100% auto;
  /* OR */
  background-size:auto 100%;
}
于 2013-04-03T20:07:45.890 に答える