• ベストアンサー

CSSでのBackground

質問です。 CSSでTRタグにBackgroundって使えますか? 何度かやっているのですがうまくいかなくて・・・ リファレンス参照してもそれらしい記述がなくて困ってます。 下記のような感じでやってるのですが何か間違ってますでしょうか? ちなみにインラインではなく、別ファイルでのCSS記述です。 tr#area_center_column{ background:url('画像パス') no-repeat; height:26px; } 画像パスの間違いなどはありません。 上記の記述じゃ無理ですか? 下記の記述でも無理でした。 tr#area_center_column{ background-image:url('画像パス'); background-repeat:no-repeat; height:26px; } インラインでは画像は表示されるんですけど・・・ どなたか教えてくださいお願いします!

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

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

  • ベストアンサー
  • key-child
  • ベストアンサー率54% (25/46)
回答No.4

> CSSでTRタグにBackgroundって使えますか? http://hp.vector.co.jp/authors/VA022006/css/colors.html?jouyou_l#background ANo.2補足 > もし別の階層にあると、画像ファイルへのパスも変わるはずです。 相対パスで記述しているなら、CSSファイルがある階層からのパスです。 HTMLファイルがある階層からのパスではないです。 http://hp.vector.co.jp/authors/VA022006/css/data.html?jouyou_l#uri

ktakusya
質問者

補足

ありがとうございます。 結局パスの変更でよかったみたいです。 ありがとうございました。

その他の回答 (5)

  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.6

以前、試した事がありました(tbodyでも無理でしたw) ブラウザによっては各<td>毎に表示されますが、 横1行に<tr><td></td><td></td></tr>等で1枚だけを全面表示するのは無理です。 tableを入れ子にして一行tableで背景を入れるか <tr>内の<td>を1つにして背景を設定し、別の方法で複数の<td>に見せる・・・

  • kyanasaki
  • ベストアンサー率42% (168/396)
回答No.5

.area_center_column { で指定して、<div>でくくって下さい、

  • goulan
  • ベストアンサー率46% (23/50)
回答No.3

No.2 さんと同じく、画像パスじゃないかと。後は、id が一文字違うとか・・・。 確かめる方法として、 table tr{ ..... } idを外して、table tr 全部に指定してみてください。それで駄目ならば、画像パスでしょう。それでいけるなら id名違いかと。

回答No.2

CSSをインライン(タグ埋め込み)したときはOKで、外部ファイルにしたときにNGだとすると、やはり画像のパスを怪しい気がするのですが…。 外部CSSファイルはHTMLファイルと同じ階層にありますか? もし別の階層にあると、画像ファイルへのパスも変わるはずです。

noname#39970
noname#39970
回答No.1

こうは? tr.area_center_column{} <tr class="area_center_column"> あとは inherit ・・・

ktakusya
質問者

補足

{}の中身は同じと考えていいですか? クラス指定でも無理でした・・・

関連するQ&A

  • 背景画像をCSSコードで半透明にしたいのですが・・

    背景画像をCSSコードで半透明にしたいのですが・・ 考えたコードはこのようです。 #sub{ background-image: url(背景画像); background-repeat: no-repeat; background-position: center center; float:left; filter:alpha(opacity=50) opacity:0.5; width:540px; /* D */ height:300px; } これだと背景を半透明にはできませんでした。 どのようにすればいいですか?

    • ベストアンサー
    • HTML
  • CSSについて教えて下さい

    ホームページビルダーでの経験しかない初心者です。CSSに挑戦していますが不明な点ばかりです。 無料テンプレートを加工していますが下記の内容を教えて頂けませんか。 topとtop2の左側(上下位置は中間)に私が追加したtop3の画像を 表示させたいのですがうまくできません。宜しくお願いいたします。 CSS #bodyid{ background:#eafefe url('img/bg.png'); padding:0; margin:0; text-align:center; } #bg{ width:706px; background:#fff; margin:0 auo; } #top{ width:400px; height:80px; background:url('img/title1.gif') no-repeat center top; text-align:left; } #top2{ width:400px; height:60px; background:url('img/title2.gif') no-repeat center top; text-align:left; } #top3{ position:absolute; left 120px; top 30px; width:100px; height:80px; background:url('img/image555.gif') no-repeat center top; } html <body id="bodyid"> <DIV id="bg"> <div id="top"></div> <div id="top3"></div> <div id="top2"></div>

  • CSS backgroundが反映されない件

    CSSレイアウトで問題にぶつかってしまいました。 http://www.vivibond.com/demo/test/test.html 上記URLをFirFoxで見ると#contentsに書いた 「background: url(images/bg2.gif) repeat-y;」が反映されません。 いったい何故でしょうか。。。 CSSはこんな感じです。 ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ body { background: #FFFFFF; margin: 0px; padding: 0px; font: 12px "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif; } /*font*/ .pink {color:#F26E71;} /*ページ全体ラッパー*/ #wapper { margin: 0px; padding: 0px; width: 850px; } #wapper1 { margin: 0px; padding: 0px; width: 850px; background: url(images/bg.jpg) repeat-y; } /*コンテンツ*/ #contents { margin: 0px; padding: 0px; width: 800px; height: auto; clear: both; background: url(images/bg2.gif) repeat-y; } /*ナビ*/ #navi { background: #F3EDEE url(images/b_bg.jpg) no-repeat; padding: 44px 44px 150px 42px; width: 160px; float: left; } .navibox1{ height: 52px; background: url(images/naviboxbg.gif) no-repeat bottom; width: auto; } .navibox2{ height: 52px; width: auto; } #main { margin: 0px; padding: 0px; float: right; width: 554px; } .image { margin: 0px; padding: 20px 34px 20px 20px; } .topics { margin: 0px 34px 0px 20px; padding: 0px; } .about_text { margin: 0px 30px 0px 24px; padding: 0px 5px 30px 10px; line-height: 20px; } /*フッター*/ #footer { margin: 0px; background: url(images/footer.jpg) no-repeat; text-align: justify; clear: both; padding: 30px 0px 30px 470px; } ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • st.css/呼び込まない??

    st cssのタグです。 /* ヘッダー*/ #head_wall{ width : 340px; height : 265px; text-align: center; background : url(img/wall01.gif) no-repeat center center; } #head{ width : 340px; height : 265px; text-align: center; background : url(img/photo.jpg) no-repeat center center; } このようなタグで呼び出していますが(テンプレサイト様のを使用) 背景のphoto.jpgが表示されません。 色々しましたがこちらではわからなかったのでここで質問させてもらいます。 この背景が表示されないのは呼び出してるHTMLのタグに問題があるのでしょうか? しかしテンプレサイトのものをそのままコピぺしてるのでそれは間違いないかと。 どなたかよろしくおねがいします。

    • ベストアンサー
    • CSS
  • CSSについて

    /** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、 ホームページを作成しました。 すべて人から教えてもらったものなので、CSSは初心者です・・・。 そこで思ったのですが、 TOP・掲示板・メール等・・・ のメニューを、左寄りにすることはできないのでしょうか? よろしくお願いします。

    • ベストアンサー
    • CSS
  • css 画像の一部分をリンクにしたいです

    画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>

    • ベストアンサー
    • CSS
  • IE8のbackgroundのcssについて

    cssで background:url(img.jpg) no-repeat center center を指定してあり、 IE6,IE7はちゃんと表示してくれますが、 IE8で見ると完全に抜けてしまいます、 その理由と解決方法をご案内いただけないでしょうか

  • CSSについての質問

    /** ナビゲーション */ #mainNavi { width:740px; height:50px; overflow:hidden; margin-left:200px; } #mainNavi li, #mainNavi li.acitve { float:left; padding-left:10px; margin-left:1px; background:url(/images/navi.png) left 0px no-repeat; } #mainNavi a { height:50px; display:block; line-height:50px; padding:0 13px 0 3px; background:url(/images/navi.png) right 0px no-repeat; color:#fff; font-size:13px; font-weight:bold; text-decoration:none; } #mainNavi li.active { background:url(/images/navi.png) left -10px no-repeat; } #mainNavi li.active a { background:url(/images/navi.png) right -100px no-repeat; color:#fff; } #mainNavi .wii li.active { background:url(/images/navi.png) left -50px no-repeat; } #mainNavi .wii li.active a { background:url(/images/navi.png) right -50px no-repeat; color:#fff; } #mainNavi .ds li.active { background:url(/images/navi.png) left -150px no-repeat; } #mainNavi .ds li.active a { background:url(/images/navi.png) right -150px no-repeat; color:#fff; } #mainNavi a:hover{ color:#ff0; text-decoration:underline; } #mainNavi li.active a:hover { } というCSSを使って、 下のようなホームページを作成しました。 http://www.nin-site.net/ すべて人から教えてもらったものなので、CSSは初心者です・・・。 そこで思ったのですが、 TOP・掲示板・メール等・・・ のメニューを、左寄りにすることはできないのでしょうか? 下は、イメージ図です。(編集しました。) http://www.nin-site.net/image_style.jpg よろしくお願いします。 すべての内容が見たい場合は、 HTMLソース:http://www.nin-site.net/index.txt CSS:http://www.nin-site.net/css/style.css です。

    • ベストアンサー
    • CSS
  • ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。

    ブラウザ崩れが起こりました。CSSを書き直したいのですが、よく分かりません。 http://www.asahi-home.info/test/asahi-home/index2.html でページ上部「ホーム」「会社情報」「住宅情報」などがあるメニューの部分です。 これが、ブラウザによっては青い画像の下に隠れてしまうようです。 当方PCでIE6、IE7、FireFox2.0、Safari(バージョン不明)で確認したところ問題なく表示されます。 クライアント様からこの部分の表示崩れがおきているとのクレームがありました。(クライアント様のブラウザ不明) その部分のCSSは以下のようになっています。 アドバイス宜しくお願いいたします。 /* ナビ*/ #navi { text-align: left; } #navi li { float: left; } #navi li a{ display: block; text-indent: -9999px; } #navi li#menu01 a{ background: url("../image/navi01.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu02 a{ background: url("../image/navi02.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu03 a{ background: url("../image/navi03.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu04 a{ background: url("../image/navi04.gif") no-repeat; width: 119px; height: 40px; } #navi li#menu05 a{ background: url("../image/navi05.gif") no-repeat; width: 99px; height: 40px; } #navi li#menu06 a{ background: url("../image/navi06.gif") no-repeat; width: 103px; height: 40px; } #navi ul li.active a { background-position: 0 -40px absolute !important; } #navi ul li a:hover { background-position: 0 -40px absolute !important; text-decoration: none; } /* メインイメージ(青の画像部分)*/ #bgmainImage { clear: both; margin: 0 auto; height: 200px; background: url("../image/main_image_bg.gif") no-repeat center bottom; } .mainImage { margin: 0 auto; width: 800px; } /* メイン コンテンツ部分*/ #bgmain { margin: 0 auto; background-color: #fff; } #main { margin: 0 auto; width: 800px; padding: 8px 0 0 0; } #main h3 { clear: both; margin: 15px 0 0 0; }

  • CSSの記述方法について

    CSSを勉強しはじめたばかりの初心者です。 画像にマウスカーソルをあわせると色が変わるCSSに、 このように記述されている箇所がありました。 #example { width: ○○px; height: ○○px; padding-top: ○○px; padding-left: ○○px; background-image: none; } #example a,#example a:hover { display : block; width: ○○px; height: ○○px; padding-top: ○○px; background-image: url(○○.png); background-repeat: no-repeat; text-decoration: none; } #example a { background-position: ○○px ○○px; } #example a:hover { background-position: ○○px ○○px; } aとa:hoverの指定だけで実現できそうなのに、 なぜこのように4つもidがあるのでしょうか。 何かの意図やテクニックのひとつなのでしょうか? まだ記述方法を詳しく理解できていないので、不思議に思いました。 ご存知の方がいらっしゃいましたらご教示ください。 よろしくお願いいたします。

    • 締切済み
    • CSS

専門家に質問してみよう