ヘッダーの背景に画像を入れる方法を紹介します。
スタイルシートの#headerに次の記述を加えます。
#header {
～
background: #ffffff;
※この背景色指定よりも下に記述してください～
background-image: url(http://～);
height: 300px;～
}
(http://～)に画像があるURLを入れてください。
heightには画像の高さを指定してください。
横幅は画像をサイトの幅に加工するのがよいかと思います。
サイト幅は初期設定(50em)で800px程です。
画像がサイトサイズにピッタリ合わなくても
繰り返しなしの中央寄せにすれば良いと思います。
#header {
～
background-image: url(http://～);
height: 300px;
background-repeat: no-repeat;
background-position: center;～
}
<02/04追記>
青い部分は大文字で書いてください。IE,Operaでは小文字でも問題ないのですがFireFox,NetScape,では大文字でなければ有効にならないようです。<02/11追記>
記述は小文字でも大文字でも構いません。
上手く表示されない原因は複数ありました。
１．背景の色をしている「background: #ffffff;」を消すか
これより下に記述を挿入しなければならない
２．全角スペースが含まれると有効にならない
※（IE,Operaでは全角スペースが含まれても有効になります）
私の記事をコピーペーストした場合、行頭に全角スペースが含まれてしまうようになっていました。誠に申し訳ありません。改めて全角スペースを排除して掲載しました。画像は左寄せ(left)や右寄せ(right)することもできます。
<04/13追記>
スタイルシートの「background-position」に%表示の数値を２つ設定することで微妙な位置設定も出来ます。
background-position: 5% 50%;
1番目の数値 左右に対応 少ないほど左 多いほど右
2番目の数値 上下に対応 少ないほど上 多いほど下管理画面左メニューに「ファイルアップロード」があります。
これを使って画像ファイルをアップロードしてください。
あなたの好きな画像を背景にしてみましょう。
オリジナリティがぐっと増しますよ。是非挑戦してみてくださいね。
- 関連記事
-
