css - 固定寸法の背景画像

Question

寸法が 1120 X 714 ピクセルの背景画像を使用しました。長さと幅の比率は、画像が歪んで見えないように、その寸法に比例する必要があります。

background-image を使用する Web ページの幅は 1024px に固定されています。私のcssには、以下があります：

body{
    background: black url("background.jpg") no-repeat fixed center;
    background-size: 1120px 100%;
}

上記の css は、背景画像の長さを 100% にします。解像度やブラウザのサイズによっては、背景画像が歪んでしまいます。

ここでは幅は問題ありません。

背景画像の固定寸法を持つこれに対する他のアプローチは何ですか?

使用する必要がありますbackground-size: 1120px 714px;か?

Answer 1

background-size を設定する場合: 最初の値は幅で、2 番目の値は高さです。したがって、画像の長さを 100% にしたい場合は、次のように記述します。

background-size: 100% 714px;

画像の高さは714pxだと思います...

Answer 2

背景サイズを指定する必要はまったくありません。以下のコードで十分です。

body{
    background: black url("background.jpg") no-repeat center center;
    background-attachment: fixed;
}