前回はHTMLで作成したテキスト情報を装飾する方法について説明しました。 HTML/CSS基礎 第16回は画面やテキストの背景を装飾するための方法を解説します。
background-color -背景色の指定-
<background-color>プロパティを指定することで、各タグの背景色を設定することができます。画面全体の背景色を設定するには、<body>タグにプロパティを指定します。
body{
background-color: thistle;
}
h1{
background-color: violet;
}
サンプルのコードは色の名前で指定していますが、カラーコードやRGB値で指定することも可能です。
background-image -背景画像の挿入-
<background-image>プロパティを使用することで、画像を挿入することができます。
画像データと聞いてすぐに思い出すのはjpg画像だと思いますが、jpgは非化学圧縮方式の画像データとなるため、呼び出すたびにほんの少しずつ劣化をしていきます。メイン画像のような多くの人が見るサイトのメイン画像にはpngデータを使用するようにしましょう。
body{
background-image:url(img/bg.png);
}<background-image>プロパティの値には、url()の（）の中に、CSSファイルから見た画像ファイルのパスを書き込みます。
特に何も指定しなければ、背景画像が縦横に繰り返され、画面いっぱいに画像を表示します。
background-repeat -背景画像の繰り返し設定-
画像の繰り返しを調整するためには、<background-repeat>プロパティを使用します。対応する値は以下の通りです。
body{
background-image:url(img/bg.jpg);
background-repeat:no-repeat;
}
repeat：初期値。画像を縦横に繰り返し表示
repeat-x：横方向にのみ画像を繰り返し表示
repeat-y：縦方向にのみ画像を繰り返し表示
no-repeat：繰り返し表示しない
backgroound-size -画像サイズの調整-
前項のままだと背景画像を設定したもののあまり見栄えが良くありません。そんな場合は、<background-size>プロパティを使用してサイズを調整します。値の種類はいくつかありますが、「cover」を使用すると画像の縦横比を維持したまま画面領域を埋め尽くすように表示領域より画像が大きい場合は画像の一部が見切れます。また、「contain」を使用すると、画像の縦横比を維持したまま画像がすべて表示されますが、表示領域が大きくなると余白ができます。
body{
background-image:url(img/bg.jpg);
background-repeat:no-repeat;
background-size: cover;
}
これで多少見栄えが良くなりました。
background-position -背景画像の位置指定-
<background-position>プロパティを使用することで、画像の表示位置を調整することができます。値にはcenter,top,bottomといったキーワードで指定することもできますし、左端・上端からの位置をそれぞれ画面サイズのパーセンテージ（相対値）やピクセル数（絶対値）で表現することが可能です。
body{
background-image:url(img/bg2.jpg);
background-repeat:no-repeat;
background-position:center;
}
パーセントで指定する際は「10% 30%」、ピクセル数で指定する場合は「20px 80px」といった方法で指定します。
まとめ
背景の色を変えたり、画像を挿入したりすることで、イメージに変化をつけることができます。いろいろな方法を試して、気に入った表現方法を探してみてください。
次回は、要素のサイズ指定し、要素の外側や内側の余白の取り方について説明します。
コメント