css - 大きな背景画像と画面サイズ

Question

タイル表示できない画像を使用する Web サイトを作成しています。背景画面全体をカバーするには、この画像が必要です。ただし、これを大型モニターだけでなく小型モニターでも機能させたいと考えています。

1 つの大きな背景画像を作成して縮小するbackground-size必要がありますか、または同じ画像の複数のバージョンをさまざまなサイズで作成し、CSS3 メディア クエリを使用して表示する画像を選択する必要がありますか? その場合、画面サイズのどのブレークポイントを使用すればよいですか?

Answer 1

またはbackground-sizeに設定されたプロパティを使用できます。これは、スケーリング アーティファクトが目立たない (パターンではなく) 写真の背景に特に適しています。containcover

2 つの比較:包含とカバー

IE8 以下でフォールバック ルールを設定することを忘れないでください (引き伸ばされた背景だけで十分です)。

Answer 2

StatCounter からの情報に基づいて、最終的に 5 つのブレークポイントを選択しました。

これは2012年12月までです。

これらの数値、私のテスト、および他の人との会話に基づいて、次のオプションを選択しました。

/*Monitors Large than 1920px, image has "soft" edges to blend into background */
@media (min-width:1921px){
    html, body{
background: url(/images/backgrounds/1920-bg-large.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* Mointores ranging from 1367px - 1920px */
@media (min-width:1367px) and (max-width:1920px){
html, body{
background: url(/images/backgrounds/1920-bg.jpg) no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* Mointores ranging from 769px - 1366px */
@media (min-width:769px) and (max-width:1366px){
html, body{
background: url(/images/backgrounds/1366-bg.jpg)  no-repeat center top fixed #190303;
background-size:100% auto;
    }
}
/* Tablets like the iPad 2 and iPad Mini */
@media (max-width:768px){
html, body{
background: url(/images/backgrounds/768-bg.jpg)  no-repeat center top fixed #190303;
background-size:100% auto;
    }
}

/* At a certain point the Background images become irrelevant as they are hidden behind other elements. Changed to a solid BG */
@media handheld, only screen and (max-width: 640px) {
html, body{
background:#190303;
    }
}

Answer 3

body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100% 100%;
}

これにより、すべての画面のすべてのブラウザで拡大されます。

私はそれらすべてに大きなものを使用します。