ベストアンサー

CSSでの背景画像の設定について

2009/07/15 19:42

CSSでの背景画像の設定について質問です。参照ページ（http://www.balmuda.com/jp/）のような、メニューバーやフッター部分の背景画像が画面いっぱいに広がるようなページを作成したいと思っているのですが、CSSでの配置で問題があったので質問させて頂きます。以下のようなdivを作って、wrapper部分に背景画像を設定しました。 <topmenu-wrapper>　メニューバー部分の背景画像を指定 <topmenu>　margin0 auto;で画面中央に配置 <contents-wrapper> コンテンツ部分の背景画像を指定 <contents>　margin0 auto;で画面中央に配置 <footer-wrapper>　フッター部分の背景画像を指定 <footer>　margin0 auto;で画面中央に配置 floatを使うまでは、思ったような表示が出来ていたのですが、 floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞解決策を教えて頂ければ幸いです。よろしくお願い致します。

earth-77
お礼率40% (2/5)

HTML
回答数5
ありがとう数3

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

abril
ベストアンサー率69% (388/560)

2009/07/17 15:58 回答No.4

No.2です。 No.3の補足のCSSを拝見しました。そちらのCSSをなるべく活かす形で、且つNo.1でのHTMLの文法的にNGなところを修正（＋NGではないが構造に無駄があると思われるところの微調整）したヴァージョンでサンプルを作ってみました。提供されたソースに全ての部分があるわけではないので、一部は「多分、こういう大枠のレイアウトにしたいのではないか？」という仮定で作っています。とりあえず下記のHTMLとCSSのサンプルをそのまま試してみて頂けませんか？サンプルの構造は、 ├ sample.html ├ css │ └ sample.css です。 ---------------------------------------------------------------------- 【HTML】sample.html ※DOCYTYPE等が不明ですので、とりあえずIE6を含む主要モダン・ブラウザが「標準準拠モード」になるHTML 4.01 Strictで検証しています。 ※また、文字コードについてはフランス語や英語のサイトの様ですので、多言語対応のUTF-8としました。 ---------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <link href="css/sample.css" type="text/css" rel="stylesheet" media="all"> </head> <body> <div id="top-menu"> <ul id="language"> <li><a href="#">English</a></li> <li><a href="#">Français</a></li> </ul> <h1 id="top-title">le village artisanal de Den den</h1> <ul id="top-navi"> <li><a href="#">TOP</a></li> <li><a href="#">CONCEPT</a></li> <li><a href="#">ARTISANA INDEX</a></li> <li><a href="#">STORE MAP</a></li> <li><a href="#">NEW INFO</a></li> <li class="top-navi-last"><a href="#">ACCESS</a></li> </ul> </div> <div id="top-movie-bg"> <div id="top-movie">＃＃＃ムービー表示領域＃＃＃ <script type="text/javascript">  </script> </div> </div> <div id="contens-wrapper"> <div id="contents" class="clearfix"> <h2 id="contents-left">New Information</h2> <dl id="contents-right"> <dt>15.07.2009</dt> <dd>Commercial period</dd> <dt>15.07.2009</dt> <dd>Commercial period</dd> </dl> </div> </div> <div id="footer-bg"> <ul id="footer" class="clearfix"> <li><a href="#">TOP</a></li> <li><a href="#">CONCEPT</a></li> <li><a href="#">INDEX</a></li> <li><a href="#">STORE MAP</a></li> <li><a href="#">NEW INFO</a></li> </ul> </div> </body> </html> ---------------------------------------------------------------------- 【CSS】sample.css ---------------------------------------------------------------------- /*clearfix*/ .clearfix { zoom: 100%; } .clearfix:after { height: 0; visibility: hidden; content: ""; display: block; clear: both; } /*background-layout*/ body { margin: 0; padding: 0; background: url(../img/background_01.jpg) repeat-x #f6f2eb; } /*top-menu layout*/ #top-menu { width: 940px; height: 152px; margin: 0 auto; } ul#language { float: right; height: 25px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: #F6F2EB; } ul#language li { float: left; width: 70px; margin: 0; padding: 0 0 0 15px; background: url(../img/arrow_15.jpg) left top no-repeat; } h1#top-title { margin: 0; clear: both; } ul#top-navi { height: 44px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: #3a3734; line-height: 3.1em; } ul#top-navi li { float: left; width: 155px; margin: 0; padding: 0; text-align:center; border-left: 1px solid #3A3734; } ul#top-navi li.top-navi-last { width: 158px; border-right: 1px solid #3A3734; } /*top-movie layout*/ #top-movie-bg { background: #020900; } #top-movie { width: 940px; margin: 0 auto; } /*contens layout*/ #contens-wrapper{ clear: both; background: url(../img/bg-graduant_03.jpg) left bottom repeat-x; } #contents { width: 942px; margin: 0 auto; background: url(../img/content-frame_14.jpg) repeat-y; } #contents h2 { font-size: 18px; color: #3A3734; margin: 20px; padding-left: 10px; border-left: solid 7px #3A3734; } h2#contents-left { float: left; width: 173px; margin: 0; padding: 10px; } dl#contents-right { float: right; width: 722px; margin: 0; padding: 10px; } /*footer layout*/ #footer-bg { width: 100%; background: url(../img/background_23.jpg) repeat-x; } ul#footer { width: 940px; list-style: none; margin: 0 auto; padding: 0; color: #333333; } ul#footer li { float: left; margin: 0 1em 0 0; padding: 0; } ---------------------------------------------------------------------- いかがでしょうか？とりあえずIE6/7、Firefox2/3、Safari3等での検証結果はほぼ同様になっています。背景で使われている画像のサイズ等がわからないですし、コンテンツの内容も想像以外のものが入るかもしれませんので、意図したレイアウトと違うとか不具合がある様でしたら具体的に補足して下さい。長くなったので、分割になってしまって申し訳ありませんが、どこをどういう理屈で変えたのか、という事は次の投稿で補足させて頂きます。

質問者

補足 2009/07/17 17:22

ご回答ありがとうございます。ご回答頂いたhtml,cssで確認してみました。意図した通りのレイアウトになっています！感動です！本当にありがとうございます。どこがどう変わったことで、不具合が修正されたのか知りたいので、お時間のあるときで結構ですので、補足頂ければ幸いです。

その他の回答 (4)

abril
ベストアンサー率69% (388/560)

2009/07/17 19:46 回答No.5

No.2/4です。 No.4での修正点に関する補足説明です。長くなりますがご容赦下さい。【HTML】＜オリジナル【A】＞ <div id="language"> <ul> <a href="#"><li>English</li></a> <a href="#"><li>Français</li></a> </ul> </div> ＜修正点＞【A1】：ulの直接の子要素はliのみ、aは子要素に持てるのはインライン要素のみ、なので<li><a href="#">～</a></li>に構造変更。【A2】：languageのコンテナの要素が現在のもの（言語のメニューリスト）だけなのであれば、divで入れ子にする必要はなく、ulに直接id属性でlanguageを指定して、CSSでスタイルを整える。＜オリジナル【B】＞ <div id="top-title" class="clearfix"> <h1>le village artisanal de Den den</h1> </div> ＜修正点＞【B1】：CSS内にclearfixのclassの記述がないが、おそらくclearfixの使いどころを勘違いしている様に思われる。”le village artisanal de Den den”というタイトルがlanguageのリストの下に来るレイアウトで良いのであれば、ここでclearfixを使う必要はなく、clearプロパティを適用するのが適切。【B2】：こちらも【A2】と同様の理屈で、h1自身にid属性で必要なスタイルを適用すれば良いので、divで入れ子にする必要がない。＜オリジナル【C】＞ <div id="top-navi"> <ul> <a href="#"><li>TOP</li></a> （省略） <div class="top-navi-last"><a href="#"><li>ACCESS</li></a></div> </ul> </div> ＜修正点＞【C1】：【A1】と同様。【C2】：【A2】と同様。【C3】：<div class="top-navi-last"><a href="#"><li>ACCESS</li></a></div>は構造が文法的に間違い。最後のリストアイテムだけ違うスタイルを与えたいなら、liに直接class属性（この場合、各ナビはユニークな存在なのでどちらかと言えばid属性の方が適切な様に思えますが、間違いではないのでとりあえずclass属性のままにしておきます）してスタイルを適用すればすむ。＜オリジナル【D】＞ <div id="contents-left"> <h4>New Information</h4> </div> ＜修正点＞【D1】：【B2】と同様。【D2】：h1の次にh2、h3がなくいきなりh4が来るのは文書構造が適切ではない。h2にしてスタイルを調整するのが望ましい。＜オリジナル【E】＞ <div id="contents-right"> <dt>15.07.2009</dt> <dd>Commercial period</dd> （省略） </div> ＜修正点＞【E1】：dt、ddはdlの子要素なのでdivを直接の親には持てない。divをそのままdlに置き換えてスタイルを調整する。＜オリジナル【F】＞ <div id="footer-bg"> <div id="footer"> <ul> <a href="#"><li>TOP</li></a> （省略） </ul> </div> </div> ＜修正点＞【F1】：【A1】【C1】と同様【F2】：【A2】【C2】と同様【CSS】【1】 /*clearfix*/ （省略）【1-1】：オリジナルのCSSに無かったので付け足しましたが、オリジナルの方のclearfixをそのまま適用してもかまいません。【2】 /*background-layout*/ body { margin: 0;【2-1】 padding: 0;【2-2】 background: url(../img/background_01.jpg) repeat-x #f6f2eb;【2-3】 } 【2-1】：不要でしたら削除を。【2-2】：同上【2-3】：一括指定できるプロパティはまとめた方が記述がすっきりします。【3】 ul#language {【3-1】 float: right;【3-2】 height: 25px;【3-3】 list-style: none;【3-3】 margin: 0;【3-3】 padding: 0;【3-3】 font-size: 14px;【3-3】 color: #F6F2EB;【3-3】 } ul#language li {【3-4】 float: left;【3-5】 width: 70px; margin: 0; padding: 0 0 0 15px;【3-6】 background: url(../img/arrow_15.jpg) left top no-repeat;【3-7】 } 【3-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。languageというidセレクタを他の要素（タグ）にも使用しないのであれば単に”#language”というセレクタでもかまいません。【3-2】：リスト全体を右寄せにします。【3-3】：リストのスタイルを指定（子要素が継承するプロパティは親要素の方にまとめて指定）。【3-4】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。【3-5】：オリジナルの"float: right;"だと、マークアップの順番（English→Français）とは逆に表示（Français→English）されますので、leftに変更。【3-6】：余白が左のみ15px残りは0なら、まとめて指定（オリジナルでは"padding-left:"の指定が5px、15pxと重複してました）。【3-7】：【2-3】と同様。【4】 h1#top-title {【4-1】 margin: 0; clear: both;【4-2】 } 【4-1】：h1のスタイルが記述されていなかったので、とりあえず想像の範囲で追加しました。任意でスタイルを調整して下さい。【4-2】：先行する要素ul#languageがfloatしているので、ここで解除します。【5】 ul#top-navi {【5-1】 height: 44px;【5-2】 list-style: none;【5-2】 margin: 0; padding: 0; font-size: 14px;【5-2】 color: #3a3734;【5-2】 line-height: 3.1em;【5-2】 } ul#top-navi li {【5-3】 float: left; width: 155px; margin: 0;【5-4】 padding: 0;【5-4】 text-align:center; border-left: 1px solid #3A3734;【5-5】【5-6】 } ul#top-navi li.top-navi-last {【5-7】 width: 158px;【5-8】 border-right: 1px solid #3A3734;【5-9】 } 【5-1】：【3-1】と同様。【5-2】：【3-3】と同様。【5-3】：【3-4】と同様。【5-4】：余白を0に初期化。【5-5】：【2-3】と同様。【5-6】：オリジナルではborder-leftの太さを"thin"という「キーワード」で値で設定していましたが、キーワード指定の場合、キーワードが対応する数値の解釈は、UA（ブラウザ）の設定に依存します。例えば、IEでは"thin"は2pxになっていますが、Firefox等では1pxと解釈されて表示される様です。ボーダーの太さは幅の計算に影響を及ぼすので、本件の様に、各リストアイテムの長さを決め打ちしないとレイアウトが崩れる様な箇所でのキーワードによる指定は（UAにより同一の結果が得られない為）不向きです。従って、ここではリストアイテム（li）の幅の指定が"width: 155px;"となっている事からborder-leftの太さは1pxでないとリスト全体の幅（親要素<div id="top-menu">～</div>に指定された"width: 940px;"）を超えてしまいますので、絶対値で指定しています。 ※リストアイテムのスタイル（ul#top-navi li {～}）に基づくアイテムの合計の幅の計算方法アイテムの幅（"width: 155px;"）×6＋左ボーダーの太さ（"border-left: 1px;"）×7＝937px 【5-7】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。【5-3】で指定済みの共通のプロパティは継承されますので省略します。【5-8】：【5-6】での計算では、リストアイテムの合計幅が937pxですから、親要素<div id="top-menu">～</div>の幅一杯になるにはあと3px足りません。その残りの分をこの最後のアイテムの幅に足して計算を合わせます。【5-9】：【2-3】と同様。【6】 #contens-wrapper {【6-1】 clear: both; background: url(../img/bg-graduant_03.jpg) left bottom repeat-x;【6-2】 } 【6-1】：widthとheightの初期値はautoですからこの場合は指定不要です。【6-2】：【2-3】と同様。【7】 #contents {【7-1】 width: 942px; margin: 0 auto; background: url(../img/content-frame_14.jpg) repeat-y;【7-2】 } 【7-1】：heightの初期値はautoですからこの場合は指定不要です。【7-2】：【2-3】と同様。【8】 #contents h2 {【8-1】 font-size: 18px; color: #3A3734; margin: 20px; padding-left: 10px; border-left: solid 7px #3A3734;【8-2】【8-3】 } 【8-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。【8-2】：【2-3】と同様。【8-3】：【5-6】と同様で、h2のレイアウト枠全体の幅が200pxでないとレイアウトが崩れますから、borderの太さも数値にする必要があります。見た目でだいたい7pxぐらいだったので置き換えました。【9】 h2#contents-left {【9-1】 float: left; width: 173px;【9-2】 margin: 0;【9-3】 padding: 10px; } 【9-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。【9-2】：【8-3】でborder-leftの太さを7pxとしたので、200px（h2のレイアウト枠全体の幅）－10px×2（左右padding）－7px（border-leftの太さ）＝173pxとなります。【9-3】：【8-1】のスタイルが継承されているので異なる部分を上書きします。【10】 dl#contents-right {【10-1】 float: right; width: 722px;【10-2】 margin: 0;【10-3】 padding: 10px; } 【10-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。【10-2】：このコンテナブロックの幅の計算を合わせます。親要素<div id="contents">～</div>の幅が942px;、右カラムの<h2 id="contents-left">～</h2>のレイアウト枠全体の幅が200pxですので、このコンテナブロックのレイアウト枠全体の幅は942px－200px＝742pxでなければなりません。オリジナルでは742pxがそのままwidthプロパティの値になっていますが、"padding: 10px;"も同時に指定されているので、左右パディングの分（10px×2）を更に引いた値がwidthの値となります。【10-3】：dlにはディフォルトで余白があるので0に初期化。【11】 #footer-bg {【11-1】 width: 100%; background: url(../img/background_23.jpg) repeat-x;【11-2】 } 【11-1】：【7-1】と同様（オリジナルでは"height:"の指定が100%、autoと重複してました）。【11-2】：【2-3】と同様。【12】 ul#footer {【12-1】 width: 940px; list-style: none;【12-2】 margin: 0 auto; padding: 0; color: #333333;【12-2】 } ul#footer li {【12-3】 float: left; margin: 0 1em 0 0;【12-4】 padding: 0; } 【12-1】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。【12-2】：【3-3】と同様【12-3】：HTMLでのマークアップの変更に合わせてセレクタを変更しました。【12-4】：横並びになったリストアイテムどうしに余白を入れました。

質問者

お礼 2009/07/17 21:42

詳しいご回答ありがとうございます。詳しく書いて頂いたので、非常に分かりやすかったです。今まで自分のHTML,CSSを人に見て頂いたことがなかったので、いろいろと勉強になりました。最初にレイアウトが崩れていたのも、いろんな間違いの積み重ねだったのですね。正しい文法で書く大切さを痛感しました。これからいろいろと勉強していこうと思います。本当に丁寧なご回答ありがとうございました。

noname#119957

2009/07/16 18:47 回答No.3

とりあえずＣＳＳです。 #top-menu { background: #FFCC00; margin: 0px auto; padding: 0px; clear: both; width: 800px; } #top-menu #language { clear: both; float: right; width: 300px; } #top-menu #language li { float: right; margin-right: 20px; } #top-menu #top-title { background: #FF6600; clear: both; padding: 15px; } #top-menu #top-navi { margin: 0px; padding: 0px; clear: both; width: 800px; } #top-menu #top-navi li { margin: 0px; padding: 0px 10px; float: left; width: 105px; list-style: none; } #contens-wrapper { margin: 0px auto; padding: 10px; clear: both; width: 780px; background: #FFFFCC; } #footer-bg { margin: 0px auto; clear: both; width: 800px; background: #FFCC00; } #footer-bg #footer { margin: 0px; padding: 10px; } #footer-bg #footer li { float: left; margin-right: 20px; } HTMLチェックは、サーバーにＵＰしないとできませんが。。 http://validator.w3.org/ 間違いはリストの中だけのようです。

質問者

補足 2009/07/16 21:32

CSSありがとうございます。ご回答いただいたCSSで背景色がどうなるかを見てみたのですが、画面いっぱいに広がるような背景には見えませんでした。私の質問が説明不足だったと思います。例えば、top-menuのbackground color#FFCC00や、#top-menu #top-titleのbackground: #FF6600が画面左右いっぱいに広がるような表示にしたいのですが、そのためにはどうすればよろしいでしょうか？（説明が下手で申し訳ありません、分かりますでしょうか？）＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊先ほどの補足でHTML部分のみ補足し、CSS部分を補足できていなかったので、CSS分も補足させて頂きます。（おそらく間違いだらけで、見て頂くのも恐縮なのですが。。） /*background-layout*/ body{ background-image:url(../img/background_01.jpg); background-repeat:repeat-x; background-color:#f6f2eb; } /*top-menu layout*/ #top-menu{ width:940px; height:152px; margin:0 auto; } #language { width:940px; height:25px; } #top-menu #language li{ width:70px; height:25px; list-style:none; padding-left:5px; margin:0; float:right; font-size:14px; padding-left:15px; background-image: url(../img/arrow_15.jpg); background-repeat: no-repeat; background-position: left; color: #F6F2EB; } #top-navi li{ height:44px; list-style:none; width:155px; float:left; font-size:14px; text-align:center; color:#3a3734; border-left-width: thin; border-left-style: solid; border-left-color: #3A3734; line-height:3.1em; } .top-navi-last li{ height:44px; list-style:none; width:155px; float:left; font-size:14px; text-align:center; color:#3a3734; border-left-width: thin; border-left-style: solid; border-left-color: #3A3734; border-right-width: thin; border-right-style: solid; border-right-color: #3A3734; } #top-movie-bg{ background:#020900; } #top-movie{ width:940px; margin:0 auto; } #contens-wrapper{ clear:both; width:auto; height:auto; background-image:url(../img/bg-graduant_03.jpg); background-position:bottom; background-repeat:repeat-x; } #contents{ width:942px; height:auto; margin:0px auto; background-image:url(../img/content-frame_14.jpg); background-repeat:repeat-y; } #contents-left{ width:200px; padding:10px; float:left; } #contents-right{ width:742px; padding:10px; float:left; } #contents h4{ font-size:18px; color:#3A3734; border-left-style:solid; border-left-width:thick; border-left-color:#3A3734; margin:20px; padding-left:10px; } #footer-bg{ width:100%; height:100%; background-image:url(../img/background_23.jpg); background-repeat:repeat-x; height:auto; } #footer{ width:940px; margin:0 auto; } #footer li{ list-style:none; float:left; color:#333333; }

abril
ベストアンサー率69% (388/560)

2009/07/16 18:26 回答No.2

補足のHTMLのソースがコピペのミスでないなら、マークアップに致命的な間違いが沢山ありますね… この状態で「思ったような表示が出来ていた」としても、それは間違いの重なった結果でたまたま質問者様の環境では上手くできている様に見えただけですので、環境が違ったり、レイアウトに変更を加えた時点でその状態は維持できなくなり、それで数々の不具合が発生している事も有り得ます。なので、 > floatを使うまでは、思ったような表示が出来ていたのですが、 > floatをcontentsの中などで指定し始めると、レイアウトが崩れてしまいました。 > clearfixなどで、対処しても、レイアウトが崩れたままです。<margin: 0 auto;がきかず、画面中央に配置されなかったりと。。＞ floatが引き金になって、「実は正しい構造になっていなかった」HTMLの表示結果が崩れ始めた、という事なのかも知れません。依って、これらの不具合を解消するにはまずマークアップを正しい状態に修正する事から始めた方が宜しいです。じゃないと、正しくない土台の上に、どんどん上塗りをして行く状態になりますので、収集がつかなくなります。 CSSを云々する前に、現在のコンテンツををHTMLの文法チェッカーにかけてみる事をお奨めします。ぱっと見ただけでも、 <a href="#"><li>English</li></a> →aの子要素にliは持てない。 <ul> （省略） <div class="top-navi-last"><a href="#"><li>ACCESS</li></a></div> </ul> →ulの直接の子要素にできるのはliのみ、divがこの様な形で入ることは許されない。 <div id="contents-right"> <dt>15.07.2009</dt> <dd>Commercial period</dd> （省略） </div> →dt、ddはdl以外を直接の親要素には持てない。 …という有り得ないマークアップになっています。

質問者

お礼 2009/07/16 21:22

ご回答ありがとうございます。 HTMLもCSSも初心者なもので、CSS以前に根本的な間違いがたくさんあるのですね、ご指摘ありがとうございます。HTMLからまず見直します。どうもありがとうございました。

reggaepunc
ベストアンサー率59% (64/108)

2009/07/16 01:34 回答No.1

htmlとcssソースをそのまま提示していただくのが、解決の早道だと思います。上記の指示だと、問題がどこにあるのかがわかりません。。

質問者

補足 2009/07/16 16:44

ご指摘ありがとうございます。非常に長くなってしまうのですが、HTMLとCSSソースを載せさせて頂きます。よろしくお願い致します。制限文字数を超えてしまうので、CSSは別途掲載します。 ***以下、HTML*** <body> <div id="top-menu"> <div id="language"> <ul> <a href="#"><li>English</li></a> <a href="#"><li>Français</li></a> </ul> </div> <div id="top-title" class="clearfix"> <h1>le village artisanal de Den den</h1> </div> <div id="top-navi"> <ul> <a href="#"><li>TOP</li></a> <a href="#"><li>CONCEPT</li></a> <a href="#"><li>ARTISANA INDEX</li></a> <a href="#"><li>STORE MAP</li></a> <a href="#"><li>NEW INFO</li></a> <div class="top-navi-last"><a href="#"><li>ACCESS</li></a></div> </ul> </div> </div> <div id="top-movie-bg"> <div id="top-movie"> <script type="text/javascript"> new fadeshow(fadeimages, 940, 460, 0, 940, 1, "R") </script> </div> </div> <div id="contens-wrapper"> <div id="contents" class="clearfix"> <div id="contents-left"> <h4>New Information</h4> </div> <div id="contents-right"> <dt>15.07.2009</dt> <dd>Commercial period</dd> <dt>15.07.2009</dt> <dd>Commercial period</dd> </div> </div> </div> <div id="footer-bg"> <div id="footer"> <ul> <a href="#"><li>TOP</li></a> <a href="#"><li>CONCEPT</li></a> <a href="#"><li>INDEX</li></a> <a href="#"><li>STORE MAP</li></a> <a href="#"><li>NEW INFO</li></a> </ul> </div> </div> </body>

CSSでの背景画像の設定について