最終更新日:2019年10月23日CSSの「background-image」プロパティを使って背景画像の設定をしてみましょう。ページの背景などに画像を利用するとホームページのイメージもだいぶ変わります。本コラムでは基本的な背景画像の設定方法を説明します。background-imageプロパティの基本書式CSSでホームページの背景全体に画像を設定するには、「background-image」プロパティを使います。);「background-imageプロパティ」は背景画像を指定すると、通常画像は縦横に繰り返し表示されます。値には画像ファイルのパスを「url()」の中に、絶対パスもしくは相対パスで指定します。サンプルファイルの「bgimg.html」をPC上に作成して下さい。ファイルの保存形式は「utf-8」にします。url(img/star.png);}</style></head><body><p>背景画像の設定</p></body></html>「bgimg.html」ファイルと同じフォルダ内に「imgフォルダ」があり、その中の画像ファイル「star.png」を背景として指定する場合、url()のファイルパスは「img/star.png」です。透過画像に背景色を設定する「background-image」プロパティに透過画像を設定している場合は、背景の色を「background-color」プロパティで指定すると画像の背景色として表示されます。url(img/star.png);}</style>ページ全体の背景色を「黒」にすると、画像(star.png)の背景に色(#000000)が適用されます。●ブラウザーの表示この例では背景の色を黒に設定しましたが、背景と文字の色が同じ色になり、文章が読めなくなっています。背景色と文字の色を設定する時には気をつけて設定をしましょう。テキストの一部に背景画像を指定する上の例ではセレクタを「body」にしましたが、「divタグ」や「pタグ」、「spanタグ」の他に「tableタグ」などに「background-image」プロパティを指定すると、ページ全体ではなく特定の部分に背景画像を指定することができます。今回は「spanタグ」に背景画像を設定する方法を見てみましょう。url(img/colors.gif);}</style></head><body><p>背景画像の設定<br><span>特定の領域に画像を指定</span>することもできます。charset="shiftjis">」に書き換えて下さい。#0000ff;」で設定しています。通常は「spanタグ」で指定した範囲の文字に対して、背景画像と文字の色が適用されます。「background-imageプロパティ」を指定するときは、画像の表示を禁止しているブラウザー対応用に、背景の色と文字の色(colorプロパティ)を合わせて指定しておくとよいでしょう。画像が表示されない場合の背景色に合わせて文字の色を青色に設定ました。その他にも基本の背景画像の設定がありますので、順に見ていきましょう。background-repeat:repeat「background-image」プロパティを設定した時の初期値になりますが、「background-repeat」プロパティの値に「repeat」を指定すると背景画像は縦横に繰り返し表示されます。background-repeat:no-repeat「background-repeat」プロパティに"no-repeat"を指定した場合は、名前の通り画像の繰り返しはされません。background-repeat:repeat-x「background-repeat」プロパティに"repeat-x"を指定した場合、画像をx軸、つまり横方向に繰り返して表示されます。background-repeat:repeat-y「background-repeat」プロパティに"repeat-y"を指定した場合、画像をy軸の縦方向に繰り返して表示されます。Codes...CSS入門:要素を左右・上下中央に配置する方法CSS入門:要素を左右・上下中央に配置する方法HTMLのレイアウトでよく使われるインライン要素やブロックレベルの要素の中央寄せについて解説します。月額単価:50万円〜3月より新規で金融系のWebサイトを受注するに伴いコーダーを募集します。運営会社|サイトマップ|利用規約|プライバシーポリシー|お問い合わせ|企業担当者様へインターノウスのプロエンジニアでは、ITエンジニア・IT技術者の上流工程求人や、転職・キャリアアップ情報を発信しています。プログラマ、SE、ネットワークエンジニア、ITコンサルなど上流、プロジェクトマネジメントを目指す全てのITエンジニアをサポートします。reserved.無料キャリア相談をする未経験からエンジニアを目指す。