css - FFとChromeでcssの背景画像が違う

Question

私は非常に奇妙な状況にあり、その理由とそれを克服する方法が本当にわかりません。そのため、1920x860 のサイズの Web サイトに背景画像を配置する必要があります。画像の末尾が異なります。たとえば、ウィンドウ全体に拡張されていない場合、画像の隅が奇妙に見えます。

これを FF でテストしたところ、うまくいきません。これを22インチモニターでテストしました（したがって、解像度は1680x ..）。これをChromeでテストすると、画像はうまく伸び、画像の角は見えません。

BUT: 私は 2 台のモニターを持っています。2 台目は 23 インチなので、解像度は最初のモニターと大差ありません。このページを Crome でテストすると、FF でも問題ありません。

次に、firebug ツールを使用して、ウィンドウの innerWidth を取得しようとしました。22 インチモニターの innerWidth は 2124px、23 インチモニターの innerWidth は 1776px です。

誰かが教えてくれたら本当にありがたいです-なぜこれが起こっているのですか? 誰かがこの画像を配置して、すべてのモニターでうまく拡張できるようにする方法を知っていれば...さらに良いでしょう.

ポイントは、画像を隅から隅まで拡張する必要があり、モニターでテストしている間、私が見ることができるように他のユーザーがこれを見るかどうか確信が持てないということです:(

ありがとう。

ここでコメントします...皆さんとても親切なので、さまざまな解決策を試しました。ポイントは、画像が背景全体をカバーしていないということです-表示され、下部に色が表示されるはずです...今、私は単純な背景を使用しています: url() no-repeat top center ..

-cover- を使用すると、画像が拡張されますが、垂直方向にのみ拡張する必要がありました。私もJSを使用しましたが、フッターがそのbg-imageの一部であるため、うまく機能しません...そしてすべて有線になります。

たぶん、@media ..を使用して、より大きな画面に大きな画像を設定します（もちろん、より大きな画像を使用します）が、これは少し大きな画面でのみ機能し、そうでなければデザインがクラッシュすると思います。

score 1 · Accepted Answer

グーグルで検索してみましょう（「CSSウィンドウの背景」の最初の結果）：

手短に：

html { 
    background: url(bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

1 に答える 1