ホームページ、ブログ製作支援サイト
ホームページ、ブログ用の無料背景素材
背景の使い方
ホームページやブログで背景を使用する場合は、主にスタイルシート(CSS)を使って背景を設定します。 <body>タグに直接指定する方法もありますが、スタイルシート(CSS)を使った方が全ページを一括変更する場合など便利です。
スタイルシート(CSS)を使用するには？
ここではCSSファイルを外部から読み込む設定を行います。
１．まず初めに、htmlソース内の<head>～</head>に
<link rel="stylesheet" href="default.css" type="text/css">
を記述してください。
default.cssは好きな名前にしてもOKです。拡張子はcss
２．htmlと同じ階層にdefault.cssを作成します。
テキストファイルの拡張子をtxtからcssに変えるだけ。
３．default.cssの中に
body{
}
と書きます。
以上で準備完了です。
スタイルシート(CSS)を使って背景を変えてみよう
準備が終わったのでスタイルシート(CSS)を使ってみます。
default.cssを開きbodyの部分を下記のように変更しましょう。
body{
background-image: url("./haikei.gif");
}
haikei.gifが画像ファイル名です。
好きな名前にしてもOK
画像も、gif、jpeg、pngファイル等の一般的な画像なら使えます。
今回用意した画像
実行結果：サンプルページ
他のサンプル
body{
background-image: url("./haikei.gif");
background-position: left top;
background-repeat: repeat-y;
}
実行結果：サンプルページ
body{
background-image: url("./haikei.gif");
background-position: left top;
background-repeat: repeat-x;
}
実行結果：サンプルページ
body{
background-image: url("./haikei.gif");
background-position: right top;
background-repeat: repeat-y;
}
実行結果：サンプルページ
がいつの間にか105円のプランを開始しましたね。