【スキルハックス】CSSで背景に画像を入れる

今回は画像を背景に適用する方法を学んでいきます。

まずはHTMLでbodyタグにdivタグを作り、その中にpタグを作ります。するとpタグに囲まれた文字だけが表示されます。

次にCSSで上記のように書き、画像は前回使った『なばなの里』の画像を使用します。

文字の高さの分だけ、画像が背景に表示されています。画像の上部分の空の青っぽい色が表示されています。

ちょっと分かりにくいので、heightを1000pxにして分かりやすくしてみます。

heightを1000pxにすると上記のように表示されます。もともとの画像の幅が足りないので、上記のような感じになります。

background-sizeをcoverにするとピッタリ合わせてくれます。

ぴったりと覆うように表示してくれます。

background-sizeを30％にすると、30％ずつ並べてくれます。

幅が30％、30％、30％、10％で表されています。

30％のサイズにして、繰り返したくない場合には、background-repeatをno-repeatにします。

30％の画像を1枚だけ表示することができました。