今回はよく使われるbackgroundプロパティについて紹介していきたいと思います。
backgroundプロパティを使うことで背景（背景色、背景画像）に関する指定をすることができます。
backgroundに関するプロパティは下記になります。
backgroundについて
backgroundに関するプロパティ
| background-color | 背景色を指定 |
| background-image | 背景画像を指定 |
| background-repeat | 背景画像を繰り返しするかどうかの指定 |
| background-position | 背景画像の水平と垂直位置を指定 |
| background-attachment | スクロールしたときの背景画像についての表示方法を指定 |
| background-clip | 背景画像の領域を指定 |
| background-size | 背景画像の表示するサイズを指定 |
| background-origin | 背景画像の基準位置を指定 |
background-clip
background-clipは（バックグラウンド・クリップ）の「background」は背景、「clip」は「切り取る」という意味になります。
background-clipは背景の領域や範囲を指定します。
background-clipを使うことで背景の表示範囲する範囲をボーダー、パディングの外側までにしたりコンテント部分のみ指定することができます。
background-clipには4つの値があります。
background-clipの値
| border-box | 背景をボーダーボックスの外側まで拡張する |
| padding-box | 背景をパディングボックスの外側まで拡張する |
| content-box | 背景をコンテントボックスの中に表示する |
| text | 背景を前景のテキストの中に表示する |
background-size
background-sizeは背景画像の表示するサイズを指定することができます。
background-sizeの値は下記になります。
background-sizeの値
| contain | 要素内で画像をトリミングしたり縦横比を崩したりせずに表示します。 |
| cover | 要素ないにできるだけ大きく拡大（小さい場合は伸ばす）、縮小（大きい場合は小さくする）して表示します。 要素と画像の比率が違う場合は隙間ができないように上下左右が切り取られます。 |
| auto | 背景画像の元の比率が維持されるように画像を拡大縮小して表示します。 |
background-origin
background-originは背景画像の基準位置を指定することができます。
background-originの値は下記になります。
background-originの値
| border-box | 背景をボーダーボックスにたいしての相対位置になる |
| padding-box | 背景はパディングボックスからの相対位置になる |
| content-box | 背景はコンテンツボックスからの相対位置になる |
backgroundの書き方例
html
<div class="img-box">
<div class="img"></div>
</div> css
.img-box{
overflow: hidden;
width: 400px;
height: 400px;
}
.img{
width: 400px;
height: 400px;
background-color: #aaa;
background-image: url(XXXX.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
コメント