Bootstrap4で背景に画像を使う方法。
背景に画像を入れるCSSのおさらい
background-image: url(“画像へのパス”); ・・・ これは説明不要ですね。
background-repeat: 繰り返しの指定; ・・・
| repeat | 全面にリピートして表示。デフォルト。 |
| repeat-x | X方向、横方向にリピート表示。 |
| repeat-y | Y方向、縦方向にリピート表示します。 |
| no-repeat | リピートなし。 |
background-size: サイズの指定; ・・・
| auto | 自動算出、基本は元画像の大きさそのまま。 |
| contain | 元画像の縦横比は保持して、要素に元画像が全て収まるように調整。 |
| cover | 元画像の縦横比は保持して、要素をちょうどよく覆うサイズに。 |
| 数値(px) | pxで大きさを調整します。 |
| 数値(%) | 割合で指定します。 |
background-position: 横の位置 縦の位置; ・・・
| キーワードで指定 | center、left、right、top、bottom、位置を指定。 |
| 数値(%) | 左上からの位置をパーセンテージで指定。 |
| 数値(px) | 左上からの位置をpxで指定。 |
おススメの設定は
|
1 2 3 4 5 6 7 |
.〇〇〇 { background-image: url(△△△); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; } |
background-position: center center; ・・・ 画像を常に天地左右の中央に配置
background-repeat: no-repeat; ・・・ 画像を繰り返し表示しない
background-size: cover; ・・・ コンテナの大きさに背景画像を調整
background-attachment: fixed; ・・・ コンテンツの高さが画像の高さより大きい時、動かないように固定※パララックスっぽい動きが欲しい時にはコレを使います。
1行で書くと、、、
|
1 2 |
.〇〇〇 {background: url(△△△) center center / cover no-repeat fixed; } |
fixedはiOSで効かない
残念ながらiOSではfixedでパララックスが実現できません、その場合はjqueryを利用する方法があります。
※サンプルではjqueryでのパララックスも掲載しています。（ソースで確認してみてください）
Bootstrap4の「jumbotron」クラスとは？
Bootstrap4には「jumbotron」というクラスがあります。
jumbotronクラスに背景を指定するとコンテンツ内の「padding」や 「margin」を見栄えよく調整してくれます。
Bootstrap4ではjumbotronクラスに背景を指定するか、背景はCSSで指定してコンテンツ内の体裁は自分の好みでやるのかは個人個人の好みの問題ですね。
サンプル
コメント