FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

ヘッダー背景を画像にする

ヘッダーの背景に画像を入れる方法を紹介します。
スタイルシートの#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追記>
記述は小文字でも大文字でも構いません。
上手く表示されない原因は複数ありました。

1.背景の色をしている「background: #ffffff;」を消すか
  これより下に記述を挿入しなければならない

2.全角スペースが含まれると有効にならない
  ※(IE,Operaでは全角スペースが含まれても有効になります)

私の記事をコピーペーストした場合、行頭に全角スペースが含まれてしまうようになっていました。誠に申し訳ありません。改めて全角スペースを排除して掲載しました。



画像は左寄せ(left)や右寄せ(right)することもできます。

<04/13追記>
スタイルシートの「background-position」に%表示の数値を2つ設定することで微妙な位置設定も出来ます。

background-position: 5% 50%;

1番目の数値 左右に対応 少ないほど左 多いほど右
2番目の数値 上下に対応 少ないほど上 多いほど下


管理画面左メニューに「ファイルアップロード」があります。
これを使って画像ファイルをアップロードしてください。

あなたの好きな画像を背景にしてみましょう。
オリジナリティがぐっと増しますよ。是非挑戦してみてくださいね。
スポンサーサイト
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
01 | 2006/02 | 03
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

01 | 2006/02 | 03
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 - - - -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。