[PR]ネットとスマホ まとめておトク!

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にすれば良いのでしょうか。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

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



<html>にbackground-colorを指定し、
<body>のbackground-colorを消すかtransparentを指定してみてください。
    • good
    • 0

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

質問分にあるままで、background-color:をとり、白がいいなら、htmlに移してはいかがでしょうか。ついでに、bodyのmarginを0にされることをお勧めします。

もう1つ、文書宣言が書かれていないのですが、過去互換では、htmlには背景を指定できません。宣言が、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
など、標準に準拠したモードになっているか、ご確認ください。

過去互換で、2つの背景にしたいなら、今現在上部か下部にあるボックスを上手く利用し横幅を100%とした、背景をつけられることをお勧めします。横幅100%とは、margin:0;border:0の状態で、html直下にあるものです。それもなく、わざわざつけなくてはならないなら、#1さんのような、box(divなど)をつけることになると思います。divもbody直下におけば、画面いっぱいの表現が可能です。
    • good
    • 0

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


図もないので、本当に何をされたいかわからないのです。「画面上」と「上と下」は矛盾してるし・・

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

[HTML]
<body>
_<div class"header">
__<h1>タイトル</h1>
_<div class="section">
__<h2>見出し</h2>
__<p>・・・・</p>
__<div class="nav">
___<ol>
____<li><a href=""></a></li>
____<li><a href=""></a></li>
____<li><a href=""></a></li>
___</ol>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
_</div>
</body>
</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%;
}
「上部と下部にx-repeat∞の背景画像」の回答画像3
    • good
    • 0

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


<body>
 <div class"header">
  <h1>タイトル</h1>
 <div class="section">
  <h2>見出し</h2>
  <p>・・・・</p>
 </div>
 <div class="footer">
 </div>
</body>
[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;
}

この回答への補足

上の書き方だと、headerとfooterの背景のみに画像が表示されるはずですよね?

私がやりたいのは、headerとfooterのみではなく、画面上一杯に、上と下に画像がx-repeatされる形です。中央にwrapperで囲んだheader,main,side,footerがきますが、デザイン的にはそwrapperの左右のスペースの上下に、画像がx-repeatされる形です。

補足日時:2011/07/25 14:25
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング