実践コーディングスキル - 第4章 Lesson8

第16回:背景に画像を設定しよう

   

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

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

背景に画像を設定する方法について解説します。
ここでは、backgroundプロパティを利用して、背景全体にクロスの画像を敷き詰めます。



この動画で学べること

・ページの背景に画像を表示させる方法



ページに背景画像を適応させよう


ページの背景に、クリーム色のテクスチャがかかったような画像を適応させていきましょう。
これは、ページ全体つまり<body>タグの部分にCSSを書いていきたいと思います。
今回は、全体に敷き詰めたいのでno-repeatを書く必要はありません。



body {
background: url(images/bg.png);
}



保存してブラウザで見てみましょう。
ページ全体がクリーム色になりました。



他にもページ全体にかけたいスタイルは<body>タグに書いておくと、何度も書かなくていいので便利です。
今回は、フォントの種類とページの上の境界線を、追加で書きましょう。




body {
background: url(images/bg.png);
border-top: 5px solid #345c39;
font-family: "メイリオ", Meiryo;
}