- ベストアンサー
上部と下部に背景画像を置きたい方法
- 上部と下部に背景画像を表示するためのCSS設定方法を解説します。
- html要素のbackground-imageとbackground-repeatプロパティを使用して、上部と下部に背景画像を配置することができます。
- body要素のbackground-positionプロパティを使用することで、上部と下部の位置を指定することも可能です。
- darlingpapa
- お礼率59% (824/1388)
- CSS
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<html>の背景が見えないのは<body>の背景色で隠れてるからですよ。 <html>にbackground-colorを指定し、 <body>のbackground-colorを消すかtransparentを指定してみてください。
その他の回答 (3)
- DrFell
- ベストアンサー率55% (305/551)
私も＃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直下におけば、画面いっぱいの表現が可能です。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
「、画面上一杯に、上と下に画像が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] <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%; }
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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; }
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_2_thumbnail_img_sm.png)
補足
上の書き方だと、headerとfooterの背景のみに画像が表示されるはずですよね？ 私がやりたいのは、headerとfooterのみではなく、画面上一杯に、上と下に画像がx-repeatされる形です。中央にwrapperで囲んだheader,main,side,footerがきますが、デザイン的にはそwrapperの左右のスペースの上下に、画像がx-repeatされる形です。