背景画像でホームページをカスタマイズ

背景画像を使ってＨＰのデザインをCSSで変更

デザインを変更する場合は、ヘッダーや本体の背景に写真画像をとりいれたりしてカスタマイズするとがらりと印象もちがってきます。
ウェブ上では無料画像やアイコン素材なども多数提供されているので、探してみることをおすすめします。

ホームページ素材の無料・有料の画像サイト

例えば、さくらの無料画像を拾ってきて、CSSで当サイトのヘッダー部分の背景に設定してみるとこのページのようになります。
このページの場合は文字と画像がかぶってしまいましたが、ある程度の空白スペースがある画像を選択するとよいでしょう。

背景画像でホームページのデザイン的な変更をする場合も、スタイルシート（CSS）を変更しながらカスタマイズすると簡単です。
見た目のデザインやレイアウトをカスタマイズするには、CSSを変更するだけでいいんです。

このスタイルシートのファイルが存在する場所は、たいていはhtmlのhead内でこのように指定されています。

<link rel="stylesheet" href="スタイルシートのurl" type="text/css">

このスタイルシートのファイルを変更するとホームページのデザインが変更されるわけですが、背景画像を利用する際もこのCSSに設定することになります。

スタイルシートへの背景画像の設定方法

このページを例にすると、このページのデザインを指定しているスタイルシートはこのような感じで作成しています。

http://www.homepage-tukurikata.com/image/sample.css

さくらの画像やレイアウトの幅、色彩などはすべてこちらのスタイルシートで指定しているのですが、このファイルで背景画像を指定しているのはこの箇所です。

#freehp {
background-image:url(http://www.homepage-tukurikata.com/image/sample.JPG);
background-repeat:no-repeat;
}

当サイトでは、#freehpの箇所がヘッダー部分にあたるのですが、そのヘッダー部分の背景画像に

http://www.homepage-tukurikata.com/image/sample.JPG

の画像を繰り返さないで表示するという意味になります。

もし、ヘッダーではなく、サイトの背景の部分に設定するとしたら、bodyの箇所に縦方向に繰り返して表示させる設定になるかもしれません。

いずれにしても、表示させたい箇所のCSSに、次のような記述をするとうまく設定されるかと思います。

background-image:url(背景画像のURL);
background-repeat:no-repeat;

ちなみに、画像を縦方向へリピートさせる場合は
background-repeat:repeat-y;
横方向へリピートさせる場合は
background-repeat:repeat-x;
のように指定します。

background-repeat:repeat;
を指定した場合は、縦と横のすべてに敷き詰めるという設定になります。

ホームページのcss(スタイルシート)でデザイン変更へ戻る