助太刀忍者(質問掲示板)

助太刀忍者

No.53730    ヘッダー画像だけ左に寄ってしまいます。
お世話になっております。

以下のブログを開設しようと思いますが
http://biyou114.gjgd.net/

なぜかヘッダー画像だけが左に寄ってしまいます。
どうすれば中央に寄せることができますでしょうか。

試してみたこととしては
width: 750px;
text-align:center;
margin:0px auto;
をヘッダー等に修正してみたのですがなぜか画像だけが左に寄ってしまいます。




CSSで関連しそうな箇所は以下の通りです。

/* 全般 */

body{
text-align: left;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
font-size:12px;
font-family:"MS Pゴシック", sans-serif;
background:url(http://file.biyou114.gjgd.net/09.jpg) no-repeat;
/*background:url(http://file.biyou114.gjgd.net/bg.gif) repeat-x;*/
}
* {
margin: 0;
padding: 0;
}

/* リンク色 */
a { color: #0000FF; text-decoration: none; }
a:link { color: #0000FF; text-decoration: none; }
a:visited { color: #0000FF; text-decoration: none; }
a:active { color: #0000FF; text-decoration: none; }
a:hover { color: #0000FF; text-decoration: underline; }

/* ページ構成 */

#whole {
width: 750px;
height:100%;
margin:0px auto;
padding-top: 0px;
text-align:center;
border:1px #000;
}

#header {
width: 750px;
text-align:center;
margin:0px auto;
padding: 0px 0px 0px 0px;
height:186px;
}

何とぞ、よろしくお願いします。
使用環境
  • OS:Microsoft Windows NT
  • ブラウザ:Google Chrome
  • モニター:1440×900
  • JavaScript:ON
  • Cookie:ON
  • 回線種別:
  • ソフトウェア:
投稿者:satoru 投稿時間:2013-08-19 01:56:38
投稿者 : No Name Ninja
投稿時間:2013-08-22 10:57:04
ヘッダーの画像は、
ヘッダーのボックス背景ではなく、ページ全体の背景として配置されているようです。

bodyのCSSを見ると、
背景画像の位置指定が何もない、イコール、デフォルト(初期値)になっているので、左上ピッタリに表示されてしまうのでしょう。

プロパティ「background」は、背景に関して一括して指定するものですが、このプロパティを使用して、且つ、特に値を記述していない場合、各値はデフォルトが適用されます。

CSSは以下の部分、

background:url(ttp://file.biyou114.gjgd.net/09.jpg) no-repeat;

上記のままですと、
画像指定(ヘッダ画像)と、並び方指定(繰り返し無し)しか、指定されていません。つまり、他はデフォルトで良いよ、という指定になっています。

これを上部真ん中にしたい場合は、以下、

background:url(ttp://file.biyou114.gjgd.net/09.jpg) no-repeat center top;

と、してみて下さい。
垂直方向を上ピッタリにしたくない場合は「top」を好きな数値に変えて下さい。

ちなみに、「試してみたこと」では、背景画像位置が変わることはないと思うので、元の記述に戻しておいた方がよいかもしれません。あまり、影響はないかとは思いますが。

尚、どうしても思い通りに配置できない場合は、ヘッダのボックスに対して背景指定すると良いかもしれません。

参考
http://www.tagindex.com/stylesheet/page/background.html
http://www.tagindex.com/stylesheet/box/background.html