body背景repeat-x時の高さ問題 ツールバーに回り込むbody背景を回避する

ヘッダーと背景を一体化して、奥行きのあるレイアウトに試みる。

1　ヘッダー画像と背景画像を同じ高さで制作。

2　body背景をｘ軸連続で配置。

　　--------------------------------------

　　　body {
　　　 background: url(画像URL) repeat-x top;
　　　}

　　--------------------------------------

　　　　↓↓↓　結果　↓↓↓

失敗(ノ゜Д゜)ノ

なぜか、ヘッダーと背景の高さがずれる。

（上記画像黄色の部分）

そして勝手に解釈。

「アメブロさんのプログラムの関係で

登録画像を背景に指定すると小さくなるんだ～」

…時間ある時に、背景画像だけ大きめにつくり直して検証してみよ…

と、あっさりレイアウト変更。

が、

この問題をきちんとした理由で

紹介してくださっている方がいらっしゃいました。

　↓↓↓　以下のようです　↓↓↓

■問題：

背景画像をx軸連続で配置したとき、ヘッダーと高さが合わない

●理由：

背景画像がアメブロのツールバーに回り込んでいるから。

そのため、アメブロのツールバー分、背景画像の天地が短くみえる。

（ツールバーとは上部に白地でアメーバロゴ・検索がある部分）

●回避：（※アメブロのツールバーの高さは変わります）

アメブロのツールバーの高さを固定しちゃう（CSS未検証）

◎スマートでない、回避法。

　→アメブロのツールバーの高さを考慮して

　　 body画像の開始位地を絶対値で指定。

　　--------------------------------------

　　　body{background:url(/) x-repeat 0 21px;}

　　--------------------------------------

現在ツールバーの高さは22px

以前は21px。

アメブロのツールバーの高さは変わるみたいなので、

変動するたびに、開始位地を変えなくてはいけない。

おまけ◎スマートでない、回避法その2。（←自己流なおバカ回答です。）

　→アメブロのツールバーの高さを考慮して背景画像の高さを

　　あらかじめツールバー分、余分につくる。

　　ツールバーの高さが変わるたびに、背景画像をつくり直し。笑

----------------------------------------------------------

この、記事を紹介してくださったのは、

Ameblo Customize のハチさんです。

アメブロをカスタマイズするときに、とても参考にさせていただいています。

ありがとうございます。

現在は、ピンクでとてもかわいいサイトです。Winter♪