求職者支援訓練でwebデザインを学ぶデザイン初心者が、背景画像を『background』で入れるとき、background-sizeの指定でどうのように違うのかを忘備録としてまとめました。
実装して見比べてみると難しいものではないので、このブログで理解できるはず!
WEBデザインでよく使う『background』を感覚的に使っている方やしっかり違いを見比べたい、デザイン初心者さん必見です。
はじめに
backgroundプロパティで指定できる値はこちら
プロパティ | 初期値 | 備考 |
---|---|---|
background-color | transparent | 背景色を指定する |
background-image | none | 背景画像を指定する |
background-repeat | repeat | 背景画像の繰り返しを指定する |
background-origin | padding-box | 背景画像の配置領域を決める |
background-position | 0% 0% | 背景画像の表示開始位置を指定する |
background-size | auto auto | 背景配置領域の縦横のサイズを背景画像に適用する |
background-attachment | scroll | 背景画像の固定・移動を指定する |
background-clip | border-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は色々弄りながらなんとなくしても形になってしまうことがあるので、しっかり違いを理解したい!という方の参考になったら嬉しいです♪
コメント