背景に画像【background-image】：CSS入門
CSS入門（26）
記事「背景色の変更【background-color】：CSS入門」で、背景に色を指定しましたが、今回はさらにレベルアップして、背景に画像を使います。
お話は、次の順番で進みます。
背景に画像を使う（background-image）
1：前回までのお話
（01）
前回は、CSSでリンクを装飾しました。
以下、前回までのCSSコードです。
2：CSSで背景に画像を入れてみる
（02）
今回は、#blog-info（1：ブログの情報）の背景に画像を入れてみましょう。画像は適当にお好きなものを使ってください。
これといった画像が見付からない場合は、当ブログの無料Web素材をご利用ください。
（03）
画像が決まったら、#blog-infoに「background-image」を指定します。
（04）
ブラウザで表示してみましょう。背景に画像が、繰返し表示されていると思います。
画像を背景として設定する主なメリットは、一元管理できるようになることです。
繰返しの設定（background-repeat）
1：background-repeatの指定値
（01）
前項では、指定した背景の全面に繰返し画像が表示されましたが、画像の数はある程度コントロールできます。
繰返しをコントロールする場合は、「background-repeat」を使います。「background-repeat」には、次の指定値があります。
- 「repeat」、または「指定なし」
- repeat-x
- repeat-y
- no-repeat
2：全面表示（repeat）
（02）
「background-repeat」に「repeat」、または「指定なし（記述しない）」にすれば、前項で試したとおり、全面に繰返し表示されます。
3：横一列だけ表示（repeat-x）
（03）
「background-repeat」に「repeat-x」を指定すると、横一列だけ表示されます。
4：縦一列だけ表示（repeat-y）
（04）
「background-repeat」に「repeat-y」を指定すると、縦一列だけ表示されます。
5：ひとつだけ表示（no-repeat）
（05）
「background-repeat」に「no-repeat」を指定すると、ひとつだけ表示されます。
表示位置の設定（backgrand-position）
1：background-positionの指定値
（01）
背景画像を表示する位置は、ある程度コントロールできます。
表示位置をコントロールする場合は、「background-position」を使います。「background-position」には、次の指定値があります。
- left top
- left center
- left bottom
- center top
- center center
- center bottom
- right top
- right center
- right bottom
2：左上に表示（left top）
（02）
「background-position」に「left top」を指定すると、左上に表示されます。
3：左中央に表示（left center）
（03）
「background-position」に「left center」を指定すると、左中央に表示されます。
4：左下に表示（left bottom）
（04）
「background-position」に「left bottom」を指定すると、左下に表示されます。
5：中央上に表示（center top）
（05）
「background-position」に「center top」を指定すると、中央上に表示されます。
6：中央中央に表示（center center）
（06）
「background-position」に「center center」を指定すると、中央中央に表示されます。
7：中央下に表示（center bottom）
（07）
「background-position」に「center bottom」を指定すると、中央下に表示されます。
8：右上に表示（right top）
（08）
「background-position」に「right top」を指定すると、右上に表示されます。
9：右中央に表示（right center）
（09）
「background-position」に「right center」を指定すると、右中央に表示されます。
10：右下に表示（right bottom）
（10）
「background-position」に「right bottom」を指定すると、右下に表示されます。
あとがき
だらだらっと説明だけ書いてしまいましたが、すべての指定値を覚える必要はありません。
「どういうことが出来るのか？」を覚えておいて、必要になったときに調べて使えれば、OKです。（コピーして貼り付ければいいのです）
ちなみに、よく利用するのは、「background-repeat」の「指定なし」と「no-repeat」です。すべて試してみる必要はありませんが、「no-repeat」は実際に試しておくことをお薦めします。
次回予告
次回は、最終チェックです。IEブラウザでも表示をチェックし、少しだけCSSハックのお話もいたします。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
- CSSでリンクを装飾する
- 背景に画像【background-image】（この記事です）
15：まとめ
作成日：2008/05/15 更新日：2008/05/15
« 「CSSでリンクを装飾する」｜「最後にIEでチェック＋CSSハック」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
タイムリー
IE6でfont-sizeを200%以上
タイムリーで、1点返して逆転！(・∀・)/
私も、いくつか教えて欲しいことがあるんだなぁ。
忙しそうなので、ひとつだけ宜しいかしら？
IE6のバグなんだと思うけれど、
font-sizeを200%以上に設定したあたりから、
文字の上下が切れちゃうんですよ。（´・ω・`）
フォントによるかもしれません。（cursiveです）
原因が分からないので、とりあえずborderを入れてみたら、
borderの外側が切れていました。
Firefoxの場合も、borderの位置は同じなんだけれど、
それでも上下切らずに表示してくれている。
Googleで「font-size 大きい ie6」「font-size 文字切れ ie6」
とかで調べても、うまくヒットしなくて、どうにもねー。
（わかんなくて1時間くらい悩んだ）
とりあえず、CSSハックで、IE6なんかには、
paddingの上下を入れることにしました。
これって、有名なバグだったりするのかしら？
何か正式な良い方法は、あるのでしょうか？
なんだろう？
IE6の野郎、と思わず言いたくなりますよね。
自分も昨日IE6で困りました。（わかんなくて一時間くらい悩んだ）
自分も今、文字サイズを２００%にしてIE6で見てみたのですが、
切れてなかった・・・。
IE7でも切れて表示されることはありませんでした。
（line-heightなどはあえて指定していません。フォントサイズのみの指定です）
なんだろう？
もしKumaCrowさんがよければコード見てみたい・・・
で、もう一回試してみたいです。
解決できなかったら逆に申し訳ないのですが・・・
IE6のline-heightのバグ
ありがとうございます！原因は、line-heightだったみたいです。
bodyに入れちゃっていたのだけれど、ダメなんすか？(´Д｀;)ガビーン
あえて指定しないってことは、バグが出やすいってことですか。
行間は、何を使って設定すれば良いのかしらん？(；´Д`)アウー
そんな、大先生の手を煩わせるなんて、恐れ多いッス。
お忙しいところ申し訳ないです。
原因が分かったので、対象とするタグには、
line-heightしないことにします。(・∀・)/アリガトー
追記：
これですわ。↓単位をつけないといいみたい。
http://cssbug.at.infoseek.co.jp/detail/winie/b057.html
なるほどー
いやいや、自分は普段は、bodyにもｐにもline-height入れてるんですが、
さっき指定しなかったのはまんまフォントサイズのみ指定だったらどうなるべ、と
思っての事でした。
いつもはクラスで目立たないタイプのline-heightが
そんな事の原因になるなんて・・・
こちらも勉強させて頂きました、こちらこそありがとうございました！
イヤーン
おかげさまで、解決しました。
まれに、line-heightの単位を指定していないテンプレートは、
こういう理由があったんやなと、いまさら気付きました。
「もう、忘れないで欲しいナリ」なんて思っていたのだけれど、
こんな話が、そこかしこに結構あるんでしょうね。(´Д｀)イヤーン
画像が表示されてうれしいです。
インデントの件、ＩＥ7で正確に１文字できましたが
Firefoxはダメでした。
我が家のＩＥはとてもオリコウサンなのでしょう。
でもあくまでKumaCrowさんの説明とコードが
あればこそ ここまでくることができました。
ありがとうございました。
あとは復讐しながら
自分で組み立ててみようなどと
”野望”を抱いています。
妻女山のふもと八幡原に布陣
コメントありがとうございます。
す、すごい。
とうとうCSSも攻略してしまったんですねー。
才女なのね、きっと。
こりゃあ、謙信公もびっくりだわ。
インデントの件は、申し訳ないです。
やはり再現できないと、何ともはや・・・ごめんなさい。
野望（？）が叶うと良いですね。
でも、sachiさんなら、ちょちょいと出来そうです。
僭越ですが、こんな時代ですから、年長者には、
どんどん情報を発信してもらえたらと思っています。
宜しくお願い申し上げます。
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/296-4132c1b7
おおおタイムリー！
今日実は、背景画像の表示で「あれ？」って事があったので、
いろいろ復習してました＾＾；
先にkumaさんのところへ来ればよかったorz
また何かわからなくなったら、今度は最初にここにこようorz
（わかんなくて１時間くらい悩んだ）