ホームページ作成講座[CSS編]背景のスタイル設定

背景の色

要素の背景色を変えるには、以下のようにプロパティと値を記述します。

background-color : 色

背景色を指定します。

（サンプル）

<style>
body{
  background-color : black;  //背景色を黒にする
  color : white;  //文字色を白にする
</style>

<p>このページは背景を黒、文字色を白に指定しています。</p>

背景画像

背景画像を指定するには、background-imageプロパティを用います。

background-image : url("画像のパス")

背景に画像を敷き詰めます。

（サンプル）

<style>
body{
  background-image : url("../img/kabe3.gif");  //ブロックの画像を背景画像に指定
  background-color : maroon;  //背景色を茶色に指定
  color : white;  //文字色を白にする
}
</style>

<p>このページはブロックの背景画像を用いています。</p>

背景画像を用いる時は、似た色の背景色も同時に指定しておきます。そうすれば万が一画像が読み込まれなかったとしても文字が読めなくなるのを防ぐことができます。

背景画像の繰り返し

背景画像は何もしなければ上のサンプルのように敷き詰められて表示されます。しかし、画像の縦か横片側だけ繰り返し表示したり、１つだけ単独で表示させたりすることも可能です。

background-repeat : repeat-x / repeat-y / no-repeat

背景画像の繰り返し方を指定します。

値にrepeat-xを指定すると、横方向にだけ繰り返されます。

値にrepeat-yを指定すると、縦方向にだけ繰り返されます。

値にno-repaetを指定すると、画像が１つだけ表示されます。

値にrepeatを指定すると、画像が敷き詰められます（デフォルト）。

（サンプル）

<style>
body{
  background-image : url("../img/ring012.gif");  //背景にリングの画像を指定
  background-repeat : repeat-y;  //縦方向に繰り返す
}
p{
  margin-left : 56px;  //左側の余白を画像の分だけ取る
}
</style>

<p>このページでは左側にリングの背景画像を繰り返し表示するようにしています。</p>

背景画像の表示位置

画像の繰り返しで特にno-repeatを指定した場合は、その画像をどこに表示するかも指定します。

background-position : 横位置 縦位置

横位置の指定では、left，center，rightといった値を使用します。

縦位置の指定では、top，center，bottomといった値を使用します。

縦と横の指定順は入れ替わっても大丈夫です。

（サンプル）

<style>
h1{
  background-image : url("../img/star011.gif");  //背景に星の画像を指定
  background-repeat : no-repeat;  //背景画像の繰り返しは無し
  background-position : left center;  //表示位置は左詰め・縦中央を指定
  padding-left : 21px;  //画像分だけ左余白を取る
  font-size : 20px;  //文字サイズを20pxに
}
</style>

<h1>背景画像の表示位置</h1>

背景画像の固定

ページをスクロールする時に、背景画像も一緒にスクロールさせるか、固定して表示したままにするかを指定することができます。そのためのプロパティと値は以下の通りです。

background-attachment : fixed / scroll / local

値にfixedを指定すると、ページをスクロールしても画像は固定されて動きません。

値にscrollを指定すると、ページに合わせて背景画像もスクロールします。

値にlocalを指定すると、要素の中身と共に背景画像もスクロールします。

（サンプル）

<style>
body{
  background-image : url("../img/cherry01.gif");  //背景にチェリーの画像を指定
  background-repeat : no-repeat;  //背景画像の繰り返しは無し
  background-position : center center;  //縦横共に中央に背景画像を表示
  background-attachment : fixed;  //背景画像の固定
}
div{
  height : 1000vh;  //スクロールできるよう高さを端末縦幅の10倍に指定
}
</style>

<div>このページの背景画像は、スクロールしても中央に固定されたままです。</div>

背景画像の表示サイズ

背景画像の表示サイズを指定することもできます。そのためのプロパティと値は以下の通りです。

background-size : contain / cover / auto

値にcontainを指定すると、画像の縦横比を保ったままエリアに収まるサイズで表示されます。

値にcoverを指定すると、画像の縦横比を保ったままエリア全体を覆い尽くすサイズで表示されます。

値にautoを指定すると、元画像のサイズのまま表示されます。

値には％やpxで指定することもできます。

（サンプル）

以下のサンプルはテキストエリアに1080×240pxの画像を背景に指定しています。ボタンを押すとbackground-sizeの値が変化します（テキストエリアは右下をマウスでドラッグするとサイズを変更できるので、色々な大きさにして試してみてください）。

グラデーション

背景にグラデーションを付けることも可能です。以下のようにプロパティと値を指定します。

background-image : linear-gradient( 方向 , 開始色 , 終了色 )

方向は、to top，to rightという感じでto 方向の形で指定します。to topの場合下から上に向かうグラデーションになります。

（サンプル）

<style>
.grabox{
  background-image : linear-gradient( to top , darkblue , aqua );  //下（ダークブルー）→上（水色）のグラデーション
  width : 90%;  //横幅90％
  height : 240px;  //高さ240px
  margin : auto;  //余白にautoを指定して中央揃えに
}
</style>

<div class="grabox"></div>

上記のグラデーション指定ではInternet Explorerや古いブラウザには対応していません。しかし最新のChrome，FireFox，Safari，Microsoft Edgeなどでは正しく表示されます。ですから上の記述方法でほぼ問題ないでしょう。