CSSの背景イメージ - 固定サイズのdivに収縮する

Question

https://jsfiddle.net/ncrcfduzに次のコードがあり、https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpgに背景イメージがあります。 divに収まるように背景画像を縮小する必要があります。画像の中心にあるコンテンツのほとんどを表示することをお勧めします。次のコードは画像の左上隅のみを示しています。

.container { 
 
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    height: 150px; 
 
    width: 300px; 
 
}

<div class="container"> 
 
</div>

Answer 1

あなたはbackground-size: contain（see the css-tricks' entry）を探している、いないcover。あなたの例がうまくいくようにするには、background-attachment: fixedを削除する必要があります。あなたのdivに背景を集中させるには、background-position: centerを使用してください。

.container{ 
 
    background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
    background-size: contain; 
 
    
 
    height: 150px; 
 
    width: 300px; 
 
}

<div class="container"> 
 
</div>

Answer 2

あなたは自分の "背景" の命令に "センター" で "固定" を交換することがあります。そのような

：ここ

background: url(https://s21.postimg.org/iq2mtjaiv/bg_boardwalk.jpg) no-repeat center; 

JSFiddle：https://jsfiddle.net/ncrcfduz/2/

Answer 3

はあなたが使用する必要があります。

.container{ 
    background-size: 100%; 
}