CSSでWebサイトの背景に画像を指定する方法

この記事では、CSSを用いてWebサイトの背景に画像を指定する方法を紹介する。

Webサイトの背景画像の指定方法

まず、背景に設定する画像を用意する。当サイトでは、250×260pxの画像を用意して、それを縦横に繰り返し表示させることによって、背景全体に画像が表示されているようにしている。

以下がCSS部分。HTMLからの呼び出し方が分からない場合は、HTMLからCSSファイルを呼び出す方法を参考にしていただきたい。

background-imageで画像のURLを指定するのだが、ここで、注意していただきたいのは相対パス指定の場合、CSSから画像ファイルへの相対パスであるということ。HTMLファイルからのパスではないので間違いのないよう。

背景画像の指定 – CSSファイル

body {
	background-image: url('../images/background.png');
	background-repeat: repeat;
	background-position: top left;
	background-attachment: scroll;
}

以上。

関連記事

button要素のデザインを変更する方法(HTML、CSS)
HTML5、CSSを用いた中央寄せのテンプレート
ブラウザ間で余白(margin,padding)を一致させる方法

コメントを残す

メールアドレスが公開されることはありません。

This blog is kept spam free by WP-SpamFree.

コメントフィード

トラックバックURL: http://monopocket.jp/blog/css/1670/trackback/