CSSスキル - 第5章 Lesson2

背景に画像を設定する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

背景に画像を設定するための、background-url、background-size、background-positionの書き方について、初心者向けに解説しています。



この動画で学べること

・背景に画像を設定する方法



背景に画像を設定する方法

今回は、背景に画像を設定する方法を見ていきましょう。
<div>タグのid名「background-img」に背景画像を入れていきたいと思います。
書き方は、「background: url(画像のパス);」です。
今編集しているHTMLにから見た画像のパスを、()の部分に書いていきましょう。




div#background-img {
background: url(img/bg.jpg);
}




一度、保存してブラウザで見てみましょう。
上手く画像が表示されました。
ブラウザの初期状態では、画像を何度も繰り返してしまいます。
繰り返しをしたくない場合は、画像のパスの次に「no-repeat」、横方向にだけ繰り返す場合は「repeat-x」、縦方向にだけ繰り返す場合は「repeat-y」と設定します。
また、一度も画像を繰り返さない場合は、画像位置を変更することができます。
例えば「right top」と指定すると、右上に画像を表示できるので、一度やってみましょう。




div#background-img {
background: url(img/bg.jpg) no-repeat right top;
}




できたら、ブラウザで見てみます。
画像が右上に配置することができました。
今回は、画像をタイル状に敷き詰める設定で大丈夫ですので、最後に「no-repeat right top」の部分は消しておきましょう。