background image or img その２

• 普通に幅、高さを指定する。そして、margin 50px autoでセンターに配置。

.backgroundImg{
background:url(img/bannar_background.PNG) no-repeat;
margin-bottom: 50px;
width:978px;
height: 550px;
margin: 100px auto;
}

•  問題はない。

•  幅をpxで指定する。高さは、padding-bottomで確保する。同じ結果を得られる。

  背景となる要素の大きさが、画像よりも小さい場合の挙動を調べる。

• 背景となる要素に、幅と高さをpxで指定。

 .backgroundImg{
background:url(img/bannar_background.PNG) no-repeat;
margin-bottom: 50px;
width:500px;
height: 300px;
background-size: contain;
margin: 100px auto;
}

• 背景となる要素に、幅をpx、高さをpadding-bottomで確保する。

•  background-size:contain;にしたから、要素に対して余白ができている。黄色い丸の部分。

 背景となる要素の大きさが、画像よりも大きい場合の挙動を調べる。

• 背景となる要素に、幅と高さをpxで指定。

.backgroundImg{
background:url(img/bannar_background.PNG) no-repeat;
margin-bottom: 50px;
width:1200px;
height: 600px;
margin: 100px auto;
}

•  センターに配置したい！

.backgroundImg{
background:url(img/bannar_background.PNG) no-repeat center center;
margin-bottom: 50px;
width:1200px;
height: 600px;
margin: 100px auto;
}

•  文字の挙動になっとく。

• 背景となる要素に、幅をpx、高さをpadding-bottomで確保する。

.backgroundImg{
background:url(img/bannar_background.PNG) no-repeat center center;
margin-bottom: 50px;
width:1200px;
height: 0px;
padding-bottom: 600px;
margin: 100px auto;
}

 background image をfluid imageにする。

• background-sizeが「contain」なのか「cover」なのか？
• レスポンシブは横長から縦長に画面比が変わる。ということは「cover」にしたら当然、画像の縦横比が変わる。画像が同じように見えるはずがない、と考える。
• 同じ画面比で見るためには、ディバイスの横幅に合わせて縦が小さくなっていくのだから、「contain」。
• background imageのレスポンシブ、画像の縦横比維持のための三点セット。

1. width: 100%（あるいはなんでも…％指定）height: 0px;
2. padding-bottom: 必要な高さ（px）
3. background-size: contain;

.backgroundImg{
background:url(img/bannar_background.PNG) no-repeat center center;
width: 100%;
height: 0px;
padding-bottom: 550px;
margin: 50px 0 0 0;
background-size: contain;
}