掲示板の背景に画像を固定する方法

このQ&Aのポイント
  • 掲示板に背景画像を固定する方法についての質問です。スタイルシートを使用して背景画像を右下に固定しましたが、画像が掲示板全体に適用されてしまいます。正しいスタイルシートの表記方法を教えてください。
  • 掲示板で背景画像を固定する方法についての質問です。スタイルシートに背景画像の設定を記述しましたが、画像がスレッドの背景にも適用されてしまいます。どのように修正すればいいでしょうか?
  • 掲示板の背景に画像を固定する方法について質問です。スタイルシートの設定で背景画像を指定しましたが、画像が掲示板全体に適用されてしまいました。適切なスタイルシートの表記方法を教えてください。
回答を見る
  • ベストアンサー

掲示板の背景に画像を固定したのですが・・・

初めまして 検索したのですが、これといった回答が見つからず新記事立てさせて頂きました 掲示板を作成し、スタイルシートを記述する欄があったので 背景画像(○○.gif)を右下に固定しよう・・・と思ったのですが 画像が背景だけではなく、スレッドの背景にも適用されてしまったみたいです これの直し方(正しいスタイルシートの表記)について、ご助力お願いします 見よう見まねの記述なのでとりあえず全て載せてみます(スタイルシート欄に記述した全文) <STYLE type="text/css"><!-- body { scrollbar-face-color:#ffffff; scrollbar-track-color:#ffffff; scrollbar-arrow-color:#7323c4; scrollbar-3dlight-color:#7323c4; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#7323c4; scrollbar-darkshadow-color:#ffffff; } BODY,TD,TH{ line-height:16pt; background-image : url(○○.gif); background-repeat : no-repeat; background-attachment : fixed; background-position : right bottom; } a{ text-decoration:none; cursor:s-resize; } --> </STYLE> どうぞよろしくお願いいたします

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • SpiceGirl
  • ベストアンサー率69% (493/713)
回答No.1

こんにちは。 BODYとTD,THを分ける。 BODY{ background-image : url(○○.gif); background-repeat : no-repeat; background-attachment : fixed; background-position : right bottom; } TD,TH{ line-height:16pt; } ではどうでしょうか。

space_c
質問者

お礼

ご指摘の部分を修正しましたら、思い通りの表示になりました! 迅速で適切な回答を頂けて本当に助かりました ありがとうございました

関連するQ&A

  • CSSで背景画像を一番下にもってきたいのですが・・・

    依頼されたページを作成中ですが、 bodyに指定したbackground画像を一番下にもってくるにはどうしたら良いか分からず、困っております。 #loginの背景に指定した「top_haikei.jpg」は、 position: fixed ; bottom:0; と指定することで一番下にもってくることに成功しましたが、 bodyの背景に指定している「haikei_bottom.gif」を一番下に持ってくる方法が分かりません。 CSS初心者の為、詳細にご教示頂ける方のご回答をお待ちしております! よろしくお願い致しますm(u_u)m ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ■CSS *{ margin:0px; padding:0px; } html { scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } body { margin:0 auto 0; background-color: #FFFFFF; font-family:sans-serif; font-size:8pt; background-image: url(../img/haikei_bottom.gif); background-repeat: repeat-x; background-position: center bottom; } form { margin:0px; scrollbar-face-color: #F5E1D8; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color:#F5E1D8; scrollbar-3dlight-color: #F5E1D8; scrollbar-arrow-color: #FFFFFF; scrollbar-track-color: #FFFFFF; scrollbar-darkshadow-color: #FFFFFF; } input { font-size:12px; } #container { width:950px; margin:0 auto 0; background-color:#FFFFFF; } #logo{ margin-left:80px; height:180px; } #box1{ text-align:center; line-height:20px; height:150px; } #login{ height:250px; background-image: url(../img/top_haikei.jpg); background-repeat: no-repeat; background-position: center bottom; position: fixed ; bottom:0; } #login_left{ float:left; margin-top:120px; margin-right:50px; line-height:20px; width:700px; } #login_right{ float:left; margin-top:100px; width:200px; }

  • スタイルシートの背景画像、挿入タグを教えてください。

    HPで背景画像を指定したいのですが、何回変更してもできません。 ずっと、背景が黒いままです。(黒にしているから) ちなみに、こんな感じです。 body { background-image : url("images/backi.gif"); background-attachment: fixed; background-position: 0% 0%; background-repeat: repeat; background-color:#000000; scrollbar-arrow-color:#808080; scrollbar-base-color:#efefef; scrollbar-darkshadow-color:#808080; scrollbar-highlight-color:#fcfcfc; scrollbar-shadow-color:#c0c0c0; scrollbar-track-color:#fcfcfc; } 【images】というフォルダーに入れています。 スタイルシートは【css】のフォルダーに入っています。 すいませんが、HP作成に詳しい方、是非教えてください。 背景画像をHPに表示させたいです。

  • スタイルシートのリンクについて

    スタイルシートを下記の様に記述しました。 そこでリンクの部分なのですが ポインタが上にのった時にff6666になるようにしているのですが、 ff9900のままなのです。 通常はffcc00 既読はff9900 ポインタ上にのった時にff6666 クリックした時にff0000としたいのです。 どなたかお教え下さい。 <style type="text/css"> <!-- BODY { SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #ffcc00; SCROLLBAR-ARROW-COLOR: #ffcc00; SCROLLBAR-BASE-COLOR: #ffffff; SCROLLBAR-DARKSHADOW-COLOR : #ffffff; SCROLLBAR-3DLIGHT-COLOR : #ffcc00} body,tr,td {font-size: 9pt;} body,tr,td {color: #ffcc00;} a {text-decoration: none;} a:link {color: #ffcc00;} a:hover {text-decoration: underline;} a:hover {color: #ff6666;} a:active {color: #ff0000;} a:visited {color: #ff9900;} body { background-repeat: no-repeat; background-position: 100% 100%; background-attachment: fixed;} --> </style>

    • ベストアンサー
    • CSS
  • Firefoxでの上部の余白について

    XHTMLとCSSでページを作成していまして、 ■XHTML部分 <div id="header"> </div> ■CSS部分 body{ scrollbar-arrow-color:#DDDDDD; scrollbar-base-color:#000000; scrollbar-shadow-color:#E9E9E9; scrollbar-face-color:#FFFFFF; scrollbar-track-color:#E5E5E5; scrollbar-highlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-3dlight-color:#C7C7C7; background:url(../images/bg_main.gif); background-position:center top; background-repeat: repeat-y; background-color:#ffffff; color:#ffffff; margin:0; padding:0; height:100%; } #header { font-size: 12px; color:#666666; text-align:left; width:800px; height:90px; background: url(../images/bg_header.gif) center top repeat-y; } としているのですが、Firefoxで見るとヘッダ画像(背景に指定)の 上に余白が出来てしまいます。 どうすれば無くなるのでしょうか? どうぞ宜しくお願い致します。

  • スクロールするテーブルに背景画像を固定させたいのです

    HTMLでテーブルを作り、スクロールできる仕様にしました。そこに背景画像を入れたのですが、スクロールの際に一緒に背景画像もスクロールしてしまいます。 文字などだけをスクロール可能にして、背景画像を固定にする方法を知っている方は教えてください。 私のソースは下記です。よろしくお願いします。 <html> <TABLE border="0" width="695" background="top-6.GIF"> <TR><TD width="72" height="34"></TD><TD width="623" height="34"><font color="red"><b><center>お知らせ</center></b></font></TD></TR> </TABLE> </DIV> </DIV> <!--本体部分--> <DIV style="overflow-y:scroll;direction:ltr;width:695;height:114px"> <DIV style="direction:ltr"> <TABLE border="0" width="695" background="top-7.GIF" style="background-attachment: fixed"> <TR><TD width="72">A</TD><TD width="623">B</TD></TR> <TR><TD>C</TD><TD>D</TD></TR> <TR><TD>E</TD><TD>F</TD></TR> <TR><TD>G</TD><TD>H</TD></TR> <TR><TD>I</TD><TD>J</TD></TR> <TR><TD>K</TD><TD>L</TD></TR> <TR><TD>M</TD><TD>N</TD></TR> <TR><TD>O</TD><TD>P</TD></TR> </TABLE> <DIV style="overflow-y:scroll;direction:ltr;width:695; scrollbar-base-color:#FFFFFF; scrollbar-track-color:#FFFFFF; scrollbar-face-color:#FFFFFF; scrollbar-shadow-color:#FFFFFF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-highlight-color:#FFFFFF; scrollbar-3dlight-color:#FFFFFF; scrollbar-arrow-color:#FFFFFF"> <DIV style="direction:ltr"> </DIV> </DIV> </html>

  • スクロールバーのスタイルシートについて。

    スクロールバーの色を変えるスタイルシートで質問です。 下記スタイルシートを使うとそれが出来るのですが、たとえば HPをフレームで2つに分けた場合、全部のページにスタイルシートを 書かなければいけないんでしょうか?一番最初のページだけではうまく いきませんでした。分かる方お手数ですが教えて頂けないでしょうか。 <style type="text/css"> body { scrollbar-face-color: #ffffff; scrollbar-highlight-color: #330066; scrollbar-shadow-color: #330066; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: orange; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #ffffff; } </style>

    • ベストアンサー
    • HTML
  • スクロールバーの色変更(長文)

    スクロールバーの色を設定したいのですが、下のように書くとうまく設定できません。 どこがおかしいのでしょうか? よろしくおねがいいたします。 <html> <head> <style type="text/css"> <!-- body { scrollbar-3dlight-color:#808080; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#ffffff; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff;} body { background-image:url("top/newtop.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:50% 20%; background-color:#ffffff; } div { text-arign:center; padding:10px; border-width:thin; border-style:dotted; background-color:transparent; } #kousinrireki{ position:static; margin-top:20px; margin-right:80%; margin-bottom:70%; margin-left:0%; } #reserve { text-arign:center; padding:0px; border-width:thin; border-style:none; background-color:transparent;     color:maroon; } --> </style> </head> <BODY TEXT="#708090"> <font size=-2> <body> <div id="kousinrireki"> ※リニューアル♪<BR> </div> <div id="reserve"> Fumio All rights reserved<BR> </div> </body> </html>

    • ベストアンサー
    • HTML
  • グラデーション背景と画像固定背景

    こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <HEAD> <STYLE> <!--BODY { background-image : url(back2.gif) ; background-repeat : no-repeat ; background-position : 90% 90% ; background-attachment : fixed ;} --> </STYLE> <STYLE> <!-- body{ filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr='#68b4ff',endcolorstr='#ffffff',gradienttype='1') } --> </STYLE> (省略) </HEAD>

  • アイフレームのスクロールバーを変えたい。

    お世話になります。 アイフレームを使いたいんですけど、スクロールバーをスケルトンとかちょっとかわいめに変えたいんです。 最終的には、背景を透かして、アイフレーム内に入る文章が長いときだけスクロールバーが現れ、それがスケルトンとかちょっと可愛いものに変えたい、ということです。 通常のhtmlだとスタイルシートで <style type="text/css"> <!-- body{scrollbar-face-color: #ffffff; scrollbar-highlight-color: #ffFFff; scrollbar-shadow-color: #ffFFff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #FF0033; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #ffffff;} --> </style> こんな感じで入れると思うんですけど、これはアイフレームにはきかないんですよね・・・。 ちなみに現状は以下です。 <IFRAME name="ifnikki" src="nikki.shtml" width="380" scrolling="AUTO" frameborder="0" flameallowtransparency="true">

  • スクロールバーの色の変更について

    パソコンによってスクロールバーの色の変更ができるのとできないのとがあるのはソースの問題でしょうか? ちなみにソースは以下のとおりです。 <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>××</title> <STYLE type="text/css"> <!--BODY{ scrollbar-face-color:#FFCECE; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #ffffff; scrollbar-3dlight-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-darkshadow-color: #ffffff; font-family: "MS ゴシック", "Osaka-等幅"; color: #660033; background-image: url(IMAGES/××.gif); }--> </STYLE> </head>

    • ベストアンサー
    • HTML

専門家に質問してみよう