【CSS】backgroundで背景画像を入れるときの配置を比較 | nekochan's

【CSS】backgroundで背景画像を入れるときの配置を比較

WEBデザイン

求職者支援訓練でwebデザインを学ぶデザイン初心者が、背景画像を『background』で入れるとき、background-sizeの指定でどうのように違うのかを忘備録としてまとめました。
実装して見比べてみると難しいものではないので、このブログで理解できるはず!

WEBデザインでよく使う『background』を感覚的に使っている方やしっかり違いを見比べたい、デザイン初心者さん必見です。

はじめに

backgroundプロパティで指定できる値はこちら

プロパティ初期値備考
background-colortransparent背景色を指定する
background-imagenone背景画像を指定する
background-repeatrepeat背景画像の繰り返しを指定する
background-originpadding-box背景画像の配置領域を決める
background-position0% 0%背景画像の表示開始位置を指定する
background-sizeauto auto背景配置領域の縦横のサイズを背景画像に適用する
background-attachmentscroll背景画像の固定・移動を指定する
background-clipborder-box背景の配置領域そのものを決める

※background-sizeはbackground-positionの指定の後に、’/’で区切って指定しなければならないため注意が必要。

backgroundは下記のようにショートハンド・複数指定もできます。

セレクタ {
	background: colorの値 imageの値 repeatの値.....;
}

※それぞれの値を入力する際には半角スペースで区切って指定すること

background-imageのサイズ指定方法

background-imageで600×400pxの画像を使って解説します。

基本の状態

背景画像の指定と実際のサイズを記載します。

.セレクタ{
  width:600px;
  height:400px;
  background-image:url("../img/bg-img.png");
}

600×400pxの画像を正方形(400px)の箱の中に収めた場合

background-size: auto;

widthとheightを400×400の正方形に指定すると、画像のサイズはそのままで途中から表示されなくなりますね。

.セレクタ{
  width:400px;
  height:400px;
  background-size: auto;
  background-image:url("../img/bg-img.png");
}

background-size: cover;

autoとほぼ変わらず、画像のサイズはそのままで途中から表示されなくなりますね。

.セレクタ{
  width:400px;
  height:400px;
  background-size: cover;
  background-image:url("../img/bg-img.png");
}

background-size: contain;

横幅のサイズに合わせて全体が見えるようになりました。

.セレクタ{
  width:400px;
  height:400px;
  background-size: contain;
  background-image:url("../img/bg-img.png")
}

background-size: 100% 100%;

縦幅と横幅がそれぞれ100%になるように調整されます。

縦横比が異なる画像をこのように指定してしまうと、明らかに伸びてしまったような見た目になるので、あまり実用的ではなさそう。。。

今回は、ゼリーの写真を利用しましたが、画像が伸びた感じになっても問題ない背景を使う時には使う機会があるかもしれません。

.セレクタ{
  width:400px;
  height:400px;
  background-size: 100% 100%;
  background-image:url("../img/bg-img.png")
}

background-size: 300px 200px;

セレクタに指定しているwidthやheightではなく、background-sizeで指定している比率に変わりました。

.セレクタ{
  width:400px;
  height:400px;
  background-size: 300px 200px;
  background-image:url("../img/bg-img.png")
}

おすすめの人気WEBデザイン参考書

まとめ

求職者支援訓練でwebデザインを学ぶデザイン初心者が、背景画像を『background』で入れるとき、background-sizeの指定でどうのように違うのかを忘備録としてまとめました。
実装して見比べてみると難しいものではないので、このブログで理解できましたよね?

CSSは色々弄りながらなんとなくしても形になってしまうことがあるので、しっかり違いを理解したい!という方の参考になったら嬉しいです♪

その他のWEBデザインに関する記事はこちら

[月1万円以下]WEBデザインスクール「デザナル」の口コミ・評判!支払い方法も
女性向けのおすすめWEBデサインスクール3選!主婦や子育て中でもできる?
シーライクスの無料体験行ってみた!何ができる?口コミ・評判は?
WEBデサインスクールは無駄?就職が厳しいのは本当?【体験談】
【無料体験】働きながら通える「デイトラ」!WEBデザイン・WEB制作

コメント

タイトルとURLをコピーしました