上部と下部に背景画像を置きたい方法

前へ 次へ
このQ&Aのポイント
  • 上部と下部に背景画像を表示するためのCSS設定方法を解説します。
  • html要素のbackground-imageとbackground-repeatプロパティを使用して、上部と下部に背景画像を配置することができます。
  • body要素のbackground-positionプロパティを使用することで、上部と下部の位置を指定することも可能です。
回答を見る
  • ベストアンサー

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

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

  • CSS
  • 回答数4
  • ありがとう数0

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

  • ベストアンサー
回答No.2

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

その他の回答 (3)

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.4

私も＃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)
回答No.3

「、画面上一杯に、上と下に画像が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)
回答No.1

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; }

darlingpapa
質問者

補足

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 画像の貼り付けについて。

    普通に画面上部に貼り付けることはできるのですが、リピートして貼り付けることができません。 <STYLE type="text/css"> <!-- body{ background-attachment:fixed; background-color:#000000; background-image:url(0266.jpg); background-position:top center; background-repeat:repeat-x;} --> </STYLE> ↑これはどこか違っているのでしょうか？

  • WindowsのFirefoxでの背景画像の表示（CSS）

    WindowsのFirefox（Ver.2.0.0.12）での背景画像の表示について質問です。 下記の様なCSSで、下寄せでX方向に画像を並べ、グラデーションで背景色と馴染むようなデザインにしたいのですが、背景色しか表示されません。 他のブラウザでは上手くいくのですが、原因がわかりません。 Dreamweaverで作っております。 body { background-image: url(img/site/bg.jpg); background-repeat: repeat-x; background-position:bottom; background-color: #826243; } どなたかご教授いただけませんでしょうか。 宜しくお願いいたします。

    • ベストアンサー
    • CSS
  • firefoxでcssを使った時背景画像が表示されない

    CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);

  • CSSによる背景画像のセンタリング。IE以外ではうまくいかない

    背景画像をセンタリングしたいのですが、以下のCSSソースでは、IE以外（firefoxなど）は左右しかセンタリングされません。 body{margin:0; padding:0; text-align:center; background-repeat: no-repeat; background-position: center center; background-image:url(../images/back5.jpg)} CSSハックを使って、個々のCSSを書くしかないんでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • IE,Firefoxでbodyの背景画像が表示されません。

    IE8とFirefox3.0で、 cssでbodyに入れている background-image、background-colorがどちらも適用されません。 Sleipnir2.8.5ではきちんと表示されます。 ですので、htmlはあっているかと思います。 一通り、タグぬけがないかとかも、調べてみましたが、 特にないようです。 いろいろ調べてみましたが、わかりません。 hasLayout対策とかも試してみました。 （width　や　position　をいれるなど） 下記がbodyのcssです。 body { color: #333; text-align: center; font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; background-color: #FFFF66; background-image: url("img/bg.jpg"); background-position: center top; background-repeat: repeat-y; margin: 0px; } 教えていただけると、 大変助かります。 よろしくお願いいたします。

  • 背景リピート―反映されない

    背景をリピートしたいのですが、反映されません。 ～HTML～ <body> <div id="container"> <div id="about"> ここに背景をリピートさせたい。 </div> </div> </body> ～CSS～ #container #about 　{ background-image: url(img/○○.jpg); background-repeat:repeat-y; } これだけでは駄目なのでしょうか？ 全くの無知で申し訳ありません。。

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

    はじめまして。 HP作成初心者なのですが、いろいろとネットで調べながら作成しています。 フレームを使っていて、メニュー画面側のほうに画像をふたつ使いたいと考えています。 それぞれ左上と左下とで固定する画像なのですが、それがどうしてもふたつ同時に表示できません。 <style type="text/css"> <!-- BODY {background-image : url("bg2.jpg");background-position: 100 0%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> <style type="text/css"> <!--BODY {background-image : url("bg.jpg");background-position: 0 100%; background-repeat: no-repeat;background-attachment: fixed;} --> </style> という感じに記述しているのですが、こうすると、下にあるbg.jpgのみが反映されてしまって、bg2.jpgは反映されません。 また、bg2.jpgの上には文字を重ねたいと考えているのですが、そのようにタグを編集してもうまく表示できません。 ご回答よろしくお願いいたします。

  • 壁紙＋画像（右・左・上・下）

    これなんですが… どなたか教えていただけませんか？ ↓は壁紙の色に（右に縦に画像）が並んで表示されます。 </STYLE> </style> <STYLE type="text/css"> <!-- BODY { background-color: #D6D6AD; background-image: url("○○○jpg"); background-repeat:repeat-y; background-attachment: fixed; background-position: right; } --> </STYLE> あと… ↓のをどのように入れれば上の1枚の壁紙に 一度に４ヵ所画像を並べられますか？ （左に縦に画像を並べる） background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-y; background-attachment: fixed; background-position: left; (上に画像を横に並べる） background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-x; background-attachment: fixed; background-position: top; （下に画像を横に並べる） background-color: #D6D6AD; background-image: url("○○○.jpg"); background-repeat: repeat-x; background-attachment: fixed; background-position: botom; 宜しくお願いします。m( _"_ )mペコ♪

    • ベストアンサー
    • HTML
  • フッタの背景画像をリピートxで左右に伸ばす方法

    フッタの背景画像をリピートxで左右に伸ばす方法について質問します。 色々なサイトを見て検証してみましたが、どのように試してもサイト自体の幅以上、画像が左右に伸びません。 切れてしまいます。 cssを載せますので、どなたかアドバイスをいただけたら嬉しいです。 よろしくお願いします。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ #footer { background-color:#ffffff; color:#222; height:100px; text-align:center; vertical-align:bottom; padding-top:35px; margin-top:13px; background-image: url(<UserImg>/footer_bg.gif) ; background-repeat: repeat-x; background-position: top; min-width:1025px; overflow:visible; }

    • ベストアンサー
    • CSS
  • 背景に複数の画像を入れることは可能でしょうか

    HTML、CSSの初心者の者です。 下記のように、CSSで背景に画像back1.gifを右上に入れているのですが、画面の右下にもう一つの画像back2.gifを入れることは可能でしょうか？ もし可能なら、方法を教えて下さい。 初心者向けに易しくご説明頂けると幸いです。 body { background-color:yellow; background-image:url(image/back1.gif); background-attachment:fixed; background-repeat:no-repeat; background-position:right top; }

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する