01 / 05
見た目を作り込む
INPUT · スライド
背景に絵をしいて見せ場を作る
02 / 05
背景に絵をしく
background-image に画像の場所を書くと、その箱の背景に絵が出る。url(...) のかっこの中に場所を書くよ。
使える絵は用意してある3つ。
/samples/hana.svg/samples/neko.svg/samples/onigiri.svg
.hero { height: 280px; background-image: url(/samples/hana.svg);}03 / 05
3つの指定で整える
そのままだと絵は元の大きさでくり返し並んでしまう。3つの指定でととのえよう。
background-size: cover;… 箱いっぱいに広げる（はみ出た分は切れる）background-position: center;… 絵の中心を箱の中心に合わせるbackground-repeat: no-repeat;… くり返さない
.hero { background-size: cover; background-position: center; background-repeat: no-repeat;}04 / 05
絵の上に文字を置ける
背景は箱の後ろ側にしかれるので、その箱の中に書いた文字は絵の上に出る。
絵の色に負けないよう、文字は大きく・白くするのが定番だよ。
.catch { font-size: 40px; color: white; text-align: center;}05 / 05
わざとくり返す使い方
background-repeat: repeat; に戻して background-size を小さく決めると、タイルのようにしきつめた模様になる。
見せ場は cover、模様は repeat。目的で使い分けよう。ここから書いてみよう。
.tile { background-repeat: repeat; background-size: 80px 80px;}