Labo 225: ボックスに背景画像を適用
Labo 225: ボックスに背景画像を適用
テキストの先頭にアイコンで作成したアイコン付きテキストが含まれるボックスに（<div class="post-info"> ～ </div> に背景画像を適用する
テキストと背景画像が重ならない様に、パディングの設定を工夫する
ボックスに背景画像を適用する
ボックスの下部に、テキストにかからないように背景を設定する
背景を適用するときは、ボックスの全面を塗りつぶすこともあれば、一部を塗る場合もある
思い通りに背景を適用するには、どこを塗りつぶすかを意識して、パディングやマージンを役割に応じて使い分ける必要がある
背景色、背景画像はボックスのボーダー領域の内側を塗りつぶす
テキストに重ならない様に背景を適用するときは、ボックスにパディング領域を作り、背景画像のくり返し設定を調整して、コンテンツ領域が塗りつぶされない様にする
その上で隣接するボックスと背景の間にスペースを空けるときは、マージン領域を作る
ボックスの背景は色や画像を指定できるだけで無く、いろいろな設定ができる
ボックスに背景色を指定する
background-color: 色;
ボックスに背景画像を指定する
background-image: url(画像のパス);
ボックスにグラデーションを指定する時も、この background-image プロパティ、もしくは background プロパティを使用する
背景画像の表示位置を指定する
値には、水平方向の位置と垂直方向の位置を指定する
何も指定しなければ、背景画像はボックスの左上に配置される
background-position; left, center, right␣距離␣top, center, bottom␣距離;
背景画像の表示サイズを指定する
画像の実際のサイズでは無く、拡大、縮小して表示させたいときに使用する
値はキーワードで指定する場合と、表示サイズを数値で指定する場合がある
キーワードには cover と contain がある
background-size: cover or contain;
表示サイズを指定する方法
画像の表示幅と高さを半角スペースで区切って指定する
単位は px を使うか % を使う
background-size: 幅 高さ;
背景画像をくり返し表示するかどうかの設定をする
設定できる値は 6つある
ページをスクロールすると、通常は背景も一緒にスクロールする
background-attachment プロパスを使うと、背景の位置を固定してスクロールしなくできる
background-attachment: scroll または fixed, local;
background プロパティを使うと、背景を指定する上述の ① ～ ⑥ のプロパティを一括で指定できる
必要な要素を ␣ で区切り列挙する