ホームページ作成講座HAC Design

CSS　背景

CSSで背景を設定することにより、さらにHTMLのソースをシンプルにすることができます。
その為、ブログや情報量の多いポータルサイトなどでは背景画像をCSSに設定し、画像ファイルを直接HTMLに組み込まないスタイルが人気です。

CSS　背景

CSSが使えるようになると、レイアウトでの画像使用は殆ど背景で設定することが可能となります。
ブログでもそうですが、レイアウトの画像はすべてCSSで背景画像として表示されています。

CSSロールオーバーでも背景画像を使いロールオーバーを表示する方法を書きましたが、背景画像の設定する場所は大抵決まっているので、ひとつ覚えてしまえば、いろいろなところに設定ができるようになります。しかし、背景の画像の表示も微妙な配置の設定などが必要となってきます。

そんな時、背景画像のCSSは設定をどのように変えたらいいか？わからなくなることがあります。
背景はCSSでどのように設定するといいのでしょうか？

CSS　背景のプロパティ

下記は背景で設定できるプロパティです。

背景プロパティ	設定値例	設定
background-color	#000000	背景色の設定
background-image	url(画像のファイル名)	背景画像の設定
background-repeat	no-repeat	背景画像の繰り返しの設定
background-position	top	背景画像の配置の設定
background-attachment	fixed	背景画像を固定する設定

上記の背景プロパティをつかったCSSの背景の例は下記のようになります。

#bannar{
background-image:url(../images/☆☆.gif);
background-repeat: no-repeat; }

background?プロパティは【background-attachment】　【background-color】【background-image】【background-position】【background-repeat】の各プロパティで使える値を半角スペースで区切り、最低限ひとつ指定すれば、ほかは省略することもできます。

上のCSSをそのまま省略してみましょう。

#bannar{
background:url(../images/☆☆.gif) no-repeat;
}

いかがですか？後者の方がスッキリしますよね。
CSSになれないうちは前者を使うとわかりやすいかもしれません。
書き方はかわっても表示は同じなので、好きな書き方でOKです。

CSSで背景色の設定

background-colorで背景色を指定する例は下記の通り

body {background-color:#fff;}

body {background-color:#0012ff;}

body {background-color:red;}

色の指定はCSS フォントでも解説しているので参考にしてください。

CSSで背景画像の設定

background-imageで背景画像を指定するには url(画像のファイル名) で指定します。配置したい画像のファイルの階層が間違っていたりすると表示されなかったりしますので、背景画像が表示されない場合はurl(画像のファイル名) のファイルの階層が正しいかどうか？確認しましょう！

body{background-image:url(../images/☆☆.gif)｝

背景画像の繰り返しの設定

background-repeatで背景画像の繰り返しを設定します。一見ただの一枚の大きな画像を貼り透けているように見える背景画像も、この background-repeat を上手く利用して、小さい画像を繰り返すことにより、一枚の背景に見せることができます。下記は背景画像を横に連続して表示する例です。

body {
background-image: url(../images/back.gif);
background-repeat: repeat-x;
}

その他の設定一覧は下記をご覧下さい。

リピート	表示	入力例
repeat	垂直水平方向に繰り返して表示	background-repeat: repeat;
repeat-x	水平方向のみ繰り返し並べて表示	background-repeat: repeat-x;
repeat-y	垂直方向のみ繰り返し並べ表示	background-repeat: repeat-ｙ;
no-repeat	１つだけ表示	background-repeat: no-repeat;

CSSで背景画像の位置の設定

背景画像の位置を指定するのは何かと微調整が必要になるので、できれば背景画像を指定する場所のサイズに合わせて画像を作るのがいいと思います。

たとえば、横のサイズが540pxの場所に指定する背景画像なら、横のサイズを540pxにしてしまうのも手です。背景の配置の設定がよくわからない、ブラウザによっておかしいなど、あまり調整が上手く行かない場合は、画像サイズを調整した方が早いので、その辺りも考えて画像を作るといいでしょう。

ですが、background-positionでの設定も覚えておくにこしたことはありません。
background-positionでの指定方法は下記のとおり。

body {
background-image: url(../images/☆☆.gif);
background-repeat: none;
background:position: 0% 10%;
}

background-positionの指定の値はいくつかあるので下記を参考にしてください。

背景プロパティ	設定値例設定
数値px等の単位	2つの数字で指定した場合、横方向、縦方向に順に位置を指定
数値%	2つの数字で指定した場合、横方向、縦方向に順に位置を指定
top	上に背景画像を表示
center	中央に背景画像を表示
left	左端に背景画像を表示
right	右端に背景画像を表示
bottom	下端に背景画像を表示