ikusion13trのブログ一覧

え～タイトル見ても意味分かりませんねｗ

前回（もっと前？）、背景だけの固定をして、日記をスクロールさせても背景と一緒に動かない様にしました。


その時にヘッダーの裏に背景が来るように

*ヘッダー画像の裏（後ろ）だと背景が隠れて背景が消えるので

日記をスクロールすると背景が出てくるように設定してたのです。


「どういうこっちゃ？」と云うと、ヘッダー画像と背景画像を同じサイズにしてたんです。

厳密に言えば背景画像の方が少し小さめなんですけどね（＾＾；


その背景画像をヘッダーの後ろに設置し、ヘッダーのタグの画像の部分だけを消すと

ヘッダーの画像はなくてもサイズで空間を開けてるので背景画像が見えるんです。

あたかも背景がヘッダー画像かな？と、訪問者に思わせられるんですよｗ



と、いう事でヘッダー画像変更と背景固定の応用編ですよ。


■背景固定■スタイルシート→詳細編集→ページBody

background-image:url(背景にしたい画像URL);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:表示する場所;

表示する場所については↑にリンクした日記を覗いてね♪


■ヘッダー画像■スタイルシート→詳細編集→ヘッダー領域

height:ヘッダーの縦サイズpx;
overflow:hidden;
float:center;
background-color:transparent;
background-image:url(ヘッダー画像URL);
display:block;

「ヘッダー画像URL」を消すと背景画像のみになりますが、タグを全部消さないように注意してね☆

ヘッダーの縦サイズは背景の縦のサイズに合わせてあげてね♪


■画像UP■スタイルシート→詳細編集→スタイル用画像

オリジナル画像を作りたい人は画像の加工についてを見てね

ちなみに配布して下さってる方も、いらっしゃいますし自分も現在、配布用のを作成中です。