webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

background image or img その2

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

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

  •  問題はない。

f:id:ohta-felica:20160824183724p:plain

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

f:id:ohta-felica:20160824183941p:plain

 

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

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

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

 

f:id:ohta-felica:20160824184512p:plain

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

f:id:ohta-felica:20160824184746p:plain

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

f:id:ohta-felica:20160824185008p:plain

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

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

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

 

f:id:ohta-felica:20160824185233p:plain

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

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

 

f:id:ohta-felica:20160824185415p:plain

  •  文字の挙動になっとく。
  • 背景となる要素に、幅を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;
}

 

f:id:ohta-felica:20160824190751p:plain

 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;
}

 

f:id:ohta-felica:20160824214929p:plain

 

f:id:ohta-felica:20160824215232p:plain