• 締切済み

CSSで左右の背景色を指定したい

CSSでページを作成しているのですが、左右の背景色をかえたページにしたいと思ってます。 そこでCSSで指定した範囲に左右に別々のIDを指定しているのですが、この場合要素の部分のみしかCSSでしていしたbackground-cplorが表示されません。 heightで指定してもいいのですが、 要素が延びる可能性もあるので表示幅に合わせて背景を表示させるのはどう指定したらよいでしょうか?

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

みんなの回答

回答No.1

具体的に何タグを使用し、どういった記述でCSSをかかれているのかを書いていただけないと的確なアドバイスができません。 是非そこのところを補足してください。 基本的に要素が伸びればそれにあわせて背景色もひろがっていくはずですが・・・。

関連するQ&A

  • CSSの背景の指定

    2つのブロック要素を左右に分けて表示しようとしましたが、#contentの内容と#naviの内容が大きさに差がある場合に背景が透けてしまうのですがどうすればよいでしょうか? 僕の予想では、#main_contentの背景が適用されると思ったのですがうまく機能していないみたいです。ここには書いていませんが、bodyに背景画像を入れていて、その画像がボックス内に出てしまうという感じです。 #naviや#contentにheightを指定してやると#main_contentの背景が余白の部分にちゃんとくるのですが、そのページごとにどちらが長くなるか予想できないので余った部分にきちんと指定した色がくるようにしたいです。 (ここでは便宜的に背景色を3色別々にしています。本来はすべて#fffにしようと思っています。) #main_content { background-color: #ff0; } /*content*/ #content { float: right; width: 512px; background-color: #f0f; } #content_inner { } /*navi*/ #navi { float: left; width: 256px; background-color: #0ff; } #navi_inner { }

    • ベストアンサー
    • HTML
  • CSSでの背景の指定について教えてください。

    背景がうまく指定できません。よろしくお願いします。 フォルダ(img)の中にbana(ファイル名)750×100のjpgの画像が置いてあります。 CSSの指定は #head{ width:750px; height:100px; background-color:#ffffff; background-image:url(../img/bana.jpg); border-bottom:#999999 solid 1px; } HTMLは <div id="head"> <h1>・・・・・・</h1> </div> です。色々と試してみたのですが、背景が入ってくれません。 初心者ですので説明不足かもしれませんが よろしくお願いします。

  • 作っているページ内に背景を表示させるには

    勉強不足で申し訳ありませんが、ホームページを独学で作成しています。 横幅950ピクセルのサイトを、中央表示させるように考えています。 その950ピクセルの左上の部分に、(繰り返しの無い)背景画像を表示させたいのですが、 CSSファイルにbackgroundで指定してやると、どうやら表示する画面のサイズに左右されるらしく、 範囲外に背景画像が出たり、自分が考えているのとは違う位置に表示されてしまいます。 ページ内のひとつの要素として、背景画像のように扱えるイメージを挿入するには、どうすれば良いでしょうか。

    • ベストアンサー
    • CSS
  • CSSで「html」にも背景指定をするのはどのような場合?

    CSSで「html」にも背景指定をするのはどのような場合? CSSの背景指定に関する質問です。 ページ全体の背景色や背景画像を指定する場合、 自分は下記のように記述をしています。 body { background:url(画像名) repeat-x #背景色; } しかし、たまにhtmlにも背景を指定しているものを見かけます。 下記のような感じです。 html,body { background:url(画像名) repeat-x #背景色; } どういったケースでhtmlにも背景を指定する必要があるのでしょうか? もしかしたらbodyのみに背景指定し、bodyにpadding等の指定を入れると、 何か不具合が起こる?と思い自分なりに実験してみましたが、 特に何も変化は無しでした。 (Firefox、IE6でチェック) 分かる方いらっしゃいましたら回答をお願いいたします。

    • ベストアンサー
    • CSS
  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか? 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }

    • ベストアンサー
    • HTML
  • cssで、imgタグに、背景画像を敷きたい

    cssで、imgタグに、背景画像(影)を敷く方法を教えてください。 ※divタグに敷く方法は分かるのですが、imgタグに敷く方法が分かりません。 ■現状 <HTML> <div id="hoge"> <img src~ <CSS> #hoge img { background-image:url(/images/background_shodow.jpg); background-repeat: none; background:position: ? width:? height:? margin:? padding:?; <影の大きさ> ・width400px ・height200px <写真のサイズ指定> ・width390px ・height190px ※これまでは、 写真のサイズが違うので、 css部分の#hoge img で、 画像の大きさを強制指定してました。 出来れば、 画像の大きさは、html側で指定せずに、 css側で調整したいです。 ムリなら、html側で大きさ指定します。 div枠にcss設定できれば早いかと思いますが、 それが出来ないため(img タグにしかcss指定不可)の相談です。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSで背景画像が表示されない

    CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか? http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします!

    • ベストアンサー
    • HTML
  • 背景をCSSで

    背景の色や壁紙をCSSで指定したいのですがCSSでの指定の仕方がわかりません。 HTMLの<body background=>ならわかるんですが どうしてもCSSで指定したいのでCSSでの指定のはわかりましたら教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでの背景の指定について質問いたします。

    CSSでの背景の指定について質問いたします。 background: url(../img/bg.gif) 0 -36px repeat-y; この場合の、0 -36px はどのような意味ですか? 背景画像の位置の指定なのでしょうが、具体的にどのように指定しているものなのか 教えていただけませんか? よろしくお願いいたします。

  • divの背景を高さ100%表示

    以下のように、divをつかって背景色を設定した際、 右のピクセル指定の背景は、スクロールバーが出た場合でも 指定された高さまで背景色が表示されるのですが、 左の100%表示指定の方はウィンドウで隠れた部分で切れてしまいます。 色々調べたのですが、 過去にも同じような内容で質問があり、min-heightを追加する事で解決するとありました。 同じように試してみたのですが、思ったように表示がされません。 指定している場所が間違っているのでしょうか? <style type="text/css"> html{ height:100%; } body { height:100%; } #test1 { height:auto !important; height:100%; min-height:100%; float:left; width:400px; background-color:black; } #test2{ float:right; height:800px; width:400px; background-color:black; } body > #test1 { height: auto; } </style> </head> <body> <div id="test1"></div> <div id="test2"></div> </body> </html>

    • ベストアンサー
    • HTML

専門家に質問してみよう