タイルできない画像を使用するウェブサイトを作成しています。バックグラウンド画面全体をカバーするにはこの画像が必要です。しかし、私はこれを大型モニターだけでなく小型モニターでも使用したいと考えています。大きな背景画像と画面サイズ
大きな背景画像を作成し、background-sizeを使用して縮小するか、さまざまなサイズの同じ画像を複数作成する必要がありますか？CSS3 Media Queriesを使用して、表示する画像を選択します。もしそうなら、画面サイズのどのブレークポイントを使うべきですか？
私はスタッツからの情報に基づいて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;
}
}
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:100% 100%;
}
これは、すべての画面ですべてのブラウザで拡大する必要があります。
私はそれらのすべてで大きなものを使用します。
background-sizeプロパティをcontainまたはcoverに設定することができます。これは、スケールアーチファクトが明白でない写真の背景（パターンとは対照的に）に特に適しています。
cover対IE8用と（ちょうど延伸背景には十分です）の下にフォールバックルールの設定について覚えておいてください。
私は2つの方法の両方を使用することをお勧めします。 2つの画像（幅= 500pxと幅= 1500pxなど）を準備し、画面幅が750より小さければ500pxを使用します。これはおそらく、メモリが小さく、帯域幅が限られているため、1500pxを使用します。また、CSSで画面に合わせるようにしてください。 – benbai123