上部と下部にx-repeat∞の背景画像を置きたい

Question

html {
background-image: url(../images/design_02.jpg);
background-repeat: repeat-x;
background-position: top;
}
body {
font-family: sans-serif;
color: #333333;
background-color: #ffffff;
background-image: url(../images/design_47.jpg);
background-repeat: repeat-x;
background-position: bottom;
}

でcssを組んでいます。

画面一杯に、ヘッダーを含めた上部、フッターを含めた下部にグラデ背景を乗せたデザインにしたいのですが、上記cssでは緩衝しあうのか、bodyで置いた画像しか表示されません。
このようなデザインにしたい場合、どのようなcssにすれば良いのでしょうか。

taloo · Accepted Answer

の背景が見えないのはの背景色で隠れてるからですよ。にbackground-colorを指定し、のbackground-colorを消すかtransparentを指定してみてください。

DrFell · Answer

私も＃2さんと同じ意見です。質問分にあるままで、background-color:をとり、白がいいなら、htmlに移してはいかがでしょうか。ついでに、bodyのmarginを0にされることをお勧めします。もう1つ、文書宣言が書かれていないのですが、過去互換では、htmlには背景を指定できません。宣言が、やなど、標準に準拠したモードになっているか、ご確認ください。過去互換で、2つの背景にしたいなら、今現在上部か下部にあるボックスを上手く利用し横幅を100％とした、背景をつけられることをお勧めします。横幅100％とは、margin:0;border:0の状態で、html直下にあるものです。それもなく、わざわざつけなくてはならないなら、#1さんのような、box(divなど)をつけることになると思います。divもbody直下におけば、画面いっぱいの表現が可能です。

ORUKA1951 · Answer

「、画面上一杯に、上と下に画像がx-repeatされる形です。」図もないので、本当に何をされたいかわからないのです。「画面上」と「上と下」は矛盾してるし・・　ウィンドウの縦横とも、ウィンドウの高さ、幅に対して100%と言う意味でしたら無理です。(古いIEはバグがあってheightでウィンドウ高さを基準にしますが、ブロック要素は内容の大きさによって高さが変わるべきですから誤り) 　ウィンドウの高さ・幅は、訪問者のディスプレイの大きさ、ウィンドウのサイズ、解像度、文字の大きさで変化します。基本ですが、HTMLの目的が【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より　である限り、不可能ですし、著者がそれを求めるのは？？です。　　ただ、それではあまりにもなので、比較的多いウィンドウの高さが600～780pxくらいと仮定した方法ですが、その範囲内でグラデーションの縦長の画像(それより下は単一色)を用意して、repeat-xで敷き詰めるのが良いでしょう。header,section,footerのmin-heightをきちんと指定しておけば、高さが600px以上の場合はあなたの思い通りに、それ以外のサイズ(i-phone450px,幅広ディスプレイの1600pxとかでも閲覧に支障はないでしょう。　添付図の中央は1280px×760px、左上は500px幅、右下は1780px・・・ [HTML] ＿

＿＿

タイトル

＿

＿＿

見出し

＿＿

・・・・

＿＿

＿＿＿

＿＿

＿

＿ [CSS] html,body{ ＿margin:0; ＿font-family: sans-serif; ＿color: #333333; ＿background: rgb(125,125,125) url(./images/background/01.jpg) repeat-x 0 0; } div.header,div.footer,div.section{ ＿width:80%;min-width:450px;max-width:900px; ＿margin:0 auto; ＿background:white; ＿border:red 1px solid; } div.header{min-height:200px;} div.section{min-height:400px;position:relative;} div.section div{border:green solid 1px;} div.section div.nav{ ＿position:absolute; ＿width:20%;min-width:100px;height:100%; ＿top:0;left:0; } div.section h2,div.section p{ ＿margin-left:20%; }

ORUKA1951 · Answer

HTMLさえきちんと出来ていれば問題ないはず・・　

タイトル

見出し

・・・・

　 [CSS} html,body{margin:0;font-family: sans-serif;color: #333333;} div.header,div.footer{ 　background-repeat:repeat-x; } div.header{ 　background-image: url(../images/design_02.jpg); 　　background-position:right top; } div.footer{ 　background-image: url(../images/design_47.jpg); 　　background-position:right bottom; }

上部と下部にx-repeat∞の背景画像を置きたい

<html>の背景が見えないのは<body>の背景色で隠れてるからですよ。

私も＃2さんと同じ意見です。

「、画面上一杯に、上と下に画像がx-repeatされる形です。

HTMLさえきちんと出来ていれば問題ないはず・・

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング