2009年6月19日金曜日

body要素のバックグラウンド画像が表示されない:サイトの作り方まとめ

私は、最近のサイト作りについては…



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

で宣言して


utf-8 で書き、 





メニュー部分などの共通部分は別ファイルにして、phpで書いて

<?php include("./tatemenu.html"); ?>
と外部ファイルで読み込む。

ロールオーバーのjsを使う


スタイルシートは共通部分と、各ページごとに分類して分けて書く。IE6はもちろんironで基本は確認


写真はライトボックスjsで、適当にカッコよく見せる
こっちのライトボックスもいいかも こっちの記事に書きましたが加工不要のjsを発見しました。


フラッシュはswfobject を使って携快表示&SEO対策

と、この程度の技術で作っているのですが、

なぜか、ここまで使うとheadの部分のjsやらcssも相当な数になる(書き方悪いのだろうが)


で,デザインですがbody のcssに私は必ず全体的なバックグランウンドイメージを設定していました。

 ところが、本日、何の気なしに確認していると、ふっとバック画像が表示されないんです。

 ライトボックスのせいかな?とちょっと悩みました。


で、結局、body 要素の直接指定するのは文字の設定だけで、

body のclass要素を設けて 背景画像を絶対パスで指定することで、確実にどのブラウザでも背景画像が表示できることを発見しました。



body.info{background-image:url('http://xn--gmqw9tw0b263au6jpzg.com/kabe2009.jpg');background-position:center;background-repeat:repeat-y;
background-color: #E0FFFF; padding: 0px;}



と、いうわけで1日かかって1ページができた…。 これを基準に全ページ、もう長い間にグチャグチャなので徹底的に統一感出して書き直す~。じわぁーっと。

 何か、他がおかしいのかもしれませんが、もうそれを追求する体力がありません。

 それでいいじゃないか!!

お問合せフォーム

お名前 :
Email: (必須)
メッセージ: (必須)


0 コメント :

コメントを投稿



連絡フォーム

名前

メール *

メッセージ *

サイト内検索