html - 背景画像のスケーリング

Question

問題が発生しています。私がやろうとしているのは、ユーザーの解像度がどれほど大きくても、背景画像を固定したままにして同じサイズと位置に保つことです。

私が今持っているもの：

#navigator {
    background-image: url('banner.png');
    background-repeat:no-repeat;
    background-position:top-center;

}

前もって感謝します！

Answer 1

メタ ビューポート オプションについて学びたいと思うでしょう。私がいつも使っているのは ですtarget-densitydpi。これは Android 固有のものです。 <meta name="viewport" content="target-densitydpi=device-dpi" />

Answer 2

ということbackground-sizeですか？

#navigator {
    background-image: url('banner.png');
    background-repeat:no-repeat;
    background-position:top-center;
    background-size: 200pt 300pt;
}

( http://www.w3schools.com/cssref/css3_pr_background-size.aspから)

CSS3 と互換性のある最新のブラウザーのほとんどで機能します。

Answer 3

これを試してください、それは私のために働きます、

html, body, <or your div>
 {
    background-image:url("fdkljg.kdf");
    background-size:100%;
    background-repeat:no-repeat;
    top:0px;
    left:0px;
    right:0px;
}

それでもうまくいかない場合は、「background-position」プロパティを中央または左に試してみてください。コードの作成が完了したら、Web ページをズームインおよびズームアウトして、画面解像度をシミュレートしてみてください。