• ベストアンサー

<tr>の背景画像について

お世話になっております。 表題のとおりなのですが、 <table width="500px"> <tr style="background-image:url('back.gif');"> として、 back.gifが500pxの画像だとします。 <tr style="background-image:url('back.gif');"> <td>aaaa</td> </tr> と、tdが1つだった場合は問題ないのですが、 <tr style="background-image:url('back.gif');"> <td>aaaa</td> <td>bbbb</td> </tr> とした場合、250pxが2枚繰り返しのような状態になってしまいます。 これを回避し、tdが何個になっても、trの画像を1枚で表示させることはできないでしょうか。 ちなみに、背景画像は500px固定です。短く切ってリピートはできない状態です。 よろしくお願いします。

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

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

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

<table> <tr> <td style="background-image:url('back.gif');"> <table> <tr> <td>aaaa</td> <td>bbbb</td> </tr> </table> </td> </tr> <table>

nyalio
質問者

補足

やっぱりそうですよね・・・ 実はそんな気がしてたんですけど、Smartyでがりがり回すんで、できるだけそのやり方は避けたかったんです・・・ まぁ、でもそれしかないならしょうがない感じですね。 回答ありがとうございます。

その他の回答 (2)

  • goldfox
  • ベストアンサー率49% (123/249)
回答No.3

1行だけの表なら、<table>に背景をつければよいのではないかと思いますが、 行ごとに背景を変えるなら、これは使えませんね。 内容によってはtable自体、使わずに済む方法もあると思います。 どのような内容なのか(表でなければいけないのか)を説明してみてはいかがでしょう?

  • MAN_MA_RUI
  • ベストアンサー率41% (426/1024)
回答No.1

背景画像は通常の画像と表示方法が異なるため設定方法も変わり大きさの指定は出来ないのですが、リピート表示をさせない方法ならあります。 background-image:url('back.gif') no-repeat center center;

nyalio
質問者

補足

早速ご回答ありがとうございます。 ポジション指定したり、no-repeatもすでにかけてみたのですが、どうにもうまくいかないのです。

関連するQ&A

  • 画像にオンマウスで背景画像を固定

    画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか? 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </HEAD> <BODY> <TABLE cellspacing="0"> <TBODY> <TR> <TD onmouseover="body.style.background='url(/image/001.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/001.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/002.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/002.jpg" width="200" height="200" border="1"></TD> </TR> <TR> <TD onmouseover="body.style.background='url(/image/003.jpg) fixed repeat';" onmouseout="body.style.background='';"><IMG src="/image/003.jpg" width="200" height="200" border="1"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ---------------------------------- 「fixed repeat';」を「fixed repeat-x';」に変えてみても変化なしでした。 また、styleに <!-- BODY { background-attachment: fixed; background-repeat: repeat-x; background:position:top} --> を書いてみたりもしたのですが変化なしでした。 ご存知の方、詳しい方アドバイスお願いします。

    • ベストアンサー
    • HTML
  • Firefoxでテーブルの背景画像が表示されない

    下記のようにテーブルに背景画像を表示させたいのですが、 なぜかFirefoxだけ背景画像が表示されません。(WindowsXP,Firefoxは最新版(1.5.0.7)です) IE,OPERA(ともに最新版)では表示されます。 いろいろと検索したのですが同様の相談は見つからず、自分が根本的にミスをしているのだと思いますが、どうしていいのかわからずに相談した次第です。 .tab{width:502px;margin-bottom:20px;} .01{background:url(img/title.gif) top no-repeat;width:502px;height:32px;padding:0px 0px 4px 20px;} .02{background:url(img/com_top.gif); width:502px;height:10px;} .03{background:url(img/com_middle.gif); width:502px;padding:5px 20px 5px 20px;} .04{background:url(img/com_bottom.gif); width:502px;height:10px;} <table cellpadding="0" cellspacing="0" class="tab"> <tr><td class="01">タイトル</td></tr> <tr><td class="02"></td></tr><tr><td class="03"> サンプルテキストサンプルテキストサンプルテキスト </td></tr><tr><td class="04"></td></tr></table> http://www.isonly.net/~second_blue/n/ ↑実際のページです。 汚いHTMLで申し訳ないのですが、解決方法をご存じの方、ご教示下さい。 よろしくお願いします。

  • 背景画像が反映されない

    以下スタイルシートとHTMLを記入しましたが背景画像が反映されません。 CSS .ta1 { background-image: url(../images/staff.jpg); } HTML <table class="ta1"><tr><td>aaaaaaaa</td></tr></table> 何がまちがっているんでしょうか? 画像の位置は間違っていません。

    • ベストアンサー
    • HTML
  • スタイルシートで背景の繰り返しができない

    スタイルシートで背景の繰り返しができない <div id="main"> <div id="navi"> <table> <tr> *** </tr> <tr> *** </tr> </table> </div> <div id="contents"> <table> <tr> *** </tr> <tr> *** </tr> </table> </div> </div> というHTMLで、スタイルシートの内容は #main{ margin-left: 60px; background-image: url("image/bg.png"); background-repeat: repeat-y; padding: 20px; white-space: nowrap; } #navi{ width: 300px; float : left; } #contents{ width: 389px; float :left; } としていますが、背景画像の繰り返しができません。 なにが原因なのでしょうか? 間違いがありましたら教えていただけないでしょうか。

    • ベストアンサー
    • CSS
  • IEと同じようにFireFoxで背景画像を表示する方法

    初めて「教えて!goo」に質問を投稿いたします。 IEにて例えば <table width="300" cellspacing="0" border="0"> <TR> <td height="5" background="http://***/abc.gif"></td> </TR> </table> ※ acb.gif(横1px×縦5px) とした時、<td></td>内の表示はバーのようになるのですが、 FireFoxでは画像が折り返されて3重のバーのようになり表示されて しまいます。 FireFoxでも1つのバーのように見えるように表示するにはどのよう にスタイルシートを書けばよろしいでしょうか。 初歩的な質問で申し訳ございませんが、どうぞよろしくお願いします。

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

    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
  • 背景画像に任意の位置でテキストを配置する

    CSSで背景画像を読み込み、に任意の位置でテキストを配置するには テーブルでとspace.gifを使ってやるしかないのでしょうか? もっとスマートな方法はないんでしょうか? CSS .ac1 { background-image: url(images/index_main01_02.jpg); width: 629px; height: 390px; } HTML <table class="ac1"> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr> <tr><td valign="top">これはテストですこれはテストですこれはテストです</td></tr> <tr><td valign="top"><img src="images/space.gif" width="239" height="60" class="over" /></td></tr></table>

    • ベストアンサー
    • CSS
  • 背景画像がきれます

    以前お聞きしたのですが、再度問題が出たのでよろしくお願いします。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> <!-- BODY{background-image : url(画像url); background-position:right top;} --> </style> </head> <BODY background="画像url" style="background-repeat:no-repeat"> でhtml書くと希望通り右上に画像が出たのですが、ずいぶん画像を小さくしなければなりません。もう少し大きくすると画像が切れてしまいます。今の状態で(小さい画像)では、実際サイトを見ると小さく画像の部分だけ区切ったような感じに見えます。どうすれば画像が区切ったような感じにならないのでしょうか?上記htmlが間違っているのでしょうか?それともう少し大きくして画像が切れない方法はないのでしょうか?よろしくお願いします。

  • gooブログの画像を背景に文字を・・・

    イラストなど画像を背景に文字を入れたいのですが、画像が二段に繰り返し入ってしまい見苦しくなっちゃいました。ぼかした花の写真をバックにUPしたのですが、一つだけ入れて文字は制限なく上に書き入れる方法ありますか?これはUPしたタグです。コメントが長すぎたのか画像が同じもの2段に入ってしまいました。 <center><table background="画像URL"width="680"height="470"><tr><td align="center"><font style=" color:blue;size:20px;"><strong><center> ●ここにコメントを入れました●</strong></font></center></td></tr></table></CENTER>

  • 時間帯によって背景画像を変える

    タイトル通りなのですが、なかなかうまくいきません・・・。 <BODY style="background-image:url(test.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;"> スタイルを使って右下に背景画像を表示しています。このtest.gifを時間帯によって変えたいです。 自分なりにこのようにしてheadタグの中に埋め込みましたがうまくいきません。 <SCRIPT LANGUAGE="JavaScript"> <!--- function geth(t){ if (t<=5) document.write("<BODY style='background-image:url(test1.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=11) document.write("<BODY style='background-image:url(test2.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=17) document.write("<BODY style='background-image:url(test3.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); else { if (t<=23) document.write("<BODY style='background-image:url(test4.gif);background-repeat:no-repeat; background-attachment:fixed;background-position:bottom right;'>"); }}} } //---> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!--- h = new Date(); geth(h.getHours()); //---> </SCRIPT> <BODY BACKGROUND='test.gif'>という普通の背景の表示の仕方ならうまくできました。スタイルはheadの中では使えないのでしょうか・・・?どのようにすればうまくいくでしょうか?JavaScriptに関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。

専門家に質問してみよう