• ベストアンサー
  • 困ってます

<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固定です。短く切ってリピートはできない状態です。 よろしくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数221
  • ありがとう数1

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

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

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

共感・感謝の気持ちを伝えよう!

質問者からの補足

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

関連するQ&A

  • 背景に複数の画像を入れることは可能でしょうか

    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
  • 画像にオンマウスで背景画像を固定

    画像にオンマウスで背景を水平方向+上に固定するにはどうしたら良いのでしょうか? 今現在使用しているタグだと垂直水平方向に繰り返しになってしまいます。 使用しているソースは以下のとおりです。 ---------------------------------- </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
  • スタイルシート

    <!-- span#k-11 { background-image : url("a.gif")} span#k-12 { background-image : url("b.gif")} span#k-21 { background-image : url("c.gif")} span#k-22 { background-image : url("d.gif")} --> <body> <table> <tr> <td><a href=""><span id="k-11" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-12" style="width:192; height:33;"></span></a></td> </tr> <tr> <td><a href=""><span id="k-21" style="width:192; height:33;"></span></a></td> <td><a href=""><span id="k-22" style="width:192; height:33;"></span></a></td> </tr> </table> </body> 外部スタイルシートで、 同じ大きさ(width:192; height:33; gif画像の大きさ)のgif画像を、縦2×横2のテーブルを表示して、その個々の画像にリンクを貼りたいと思っています。 一応これできますが、もう少しbody内のテーブルを簡略したいと思いますが、なかなかうまいきません。 1.大きさの部分(width:192; height:33;)をスタイルに入れると、何故か画像が表示されなくなります。 2.リンクの部分もスタイルに入れたいのですが、どのようにすればよいかわかりません。 どうぞご指導よろしくお願いします。

その他の回答 (2)

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

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

共感・感謝の気持ちを伝えよう!

  • 回答No.1

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

共感・感謝の気持ちを伝えよう!

質問者からの補足

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

関連するQ&A

  • セルの背景画像ランダムチェンジがうまくいきません!

    過去の質問などを参考にセルの背景画像のランダムチェンジのソースを作りましたがうまく表示されません!何かアドバイスがあれば是非お願いします。 <head> <script language="javascript"> var BGimg=new Array(); BGimg[0]="image/01.gif"; BGimg[1]="image/02.gif"; var img_pcs=BGimg.length;//画像の数 var rdm_num=Math.floor(Math.random()*img_pcs);//乱数 function chg_BGimg(){ document.getElementById("changeIMG").style.backgroundImage="url('"+BGimg[rdm_num]+"')"; } </script> </head> <body onload="chg_BGimg();"> <table bgcolor="#333333"> <tr> <td id="changeIMG" style="background-image:url('image/first.gif');">このセルの背景が変わります</td> <td>blank</td> <tr> </table> </body> (実際のテーブルは列11×行9です。) 以上がソースです。どうも初期設定のfirst.gifが一瞬だけ表示されて、あとはテーブルの背景色になり、何も画像が表示されてず、「×」マーク(画像が見つからなかった場合にでるアイコン)もないのです。 このソースの改良点または、全く違う方法でも結構です、何かアドバイスがあれば是非お願いします。よろしくお願いします!

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

    タイトル通りなのですが、なかなかうまくいきません・・・。 <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に関してはほとんど無知ですがよろしくおねがいします。 ※意味不明なことを言っていたらすみません。

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

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

    • ベストアンサー
    • HTML
  • 背景画像

    つい先日もこちらで教えていただいたのですが、また分からないのでよろしくお願いします。ビルダー11を使っています。 <style type="text/css"> <!-- body { margin:0px; padding:0px; text-align:center; } #main { margin-left:auto; margin-right:auto; text-align:left; width:650px; } --> </style> </head> <BODY background="080aosirobudou_300.jpg" style="background-repeat:no-repeat"> htmlで全体を真ん中にして、画像はリピートしないようにしていますが 画像の下半分が切れてしまいます。画像を小さくするしかないでしょうか?(加工OKなものを使っています)それと出来れば画像を右端によせたいのですが、上記htmlに <STYLE TYPE="text/css"> <!-- BODY{background-image:url(画像url); background-position:right} --> </STYLE> とすると、画像やスタイルがつぶれます。どうすればよいのでしょうか?ただいま勉強中のため、できましたら素人にも分かりやすく答えていただければありがたいです。よろしくお願いします。

  • 時間によってテーブルのTDの背景画像を変更

    ホームページの一部ですが、テーブルのTRにTDを三つつけています。その三つのうち、両側は部屋の壁にして、真中のTDのbackgroundに景色の画像を指定して、その上に、IMG SRCで窓枠の画像をつけています。このTDの背景画像の景色の画像を時間によって変更したいです。夕方時には、夕方の景色、夜は夜の景色を表示するようにしたいのですが、とりあえず、今書き込んでみたJavaScriptでは、インターネットエクスプローラーでは、表示されるのですが、ネットスケープ7.1ではエラーになってしまいます。どこがおかしいのか、わかりません。どうか教えてください。 タグを書きこみしておきます。  なお、★は夜の景色画像、◎は昼の景色画像、●は夕方の景色画像です。 <html><head><title></title> <script language="javascript"> function chImg(){ today = new Date() var checkNum = today.getHours() if(checkNum == 0){ t1.style.backgroundImage="url(★)" } else if(checkNum == 1){ t1.style.backgroundImage="url(★)" } *************中略***************** else if(checkNum == 5){ t1.style.backgroundImage="url(◎)" } *************中略***************** else if(checkNum == 17){ t1.style.backgroundImage="url(●)" } } </script> </head> <body onLoad="chImg()"> <table> <tr><td bgcolor="white">&nbsp;</td> //壁のTD <td ID="t1"><img src="mado.gif"></td> //景色と窓のTD <td bgcolor="white">&nbsp;</td> //壁のTD </tr></table> </body> </html> どうかよろしくお願いします。

  • 両端に背景画像を入れる

    画面の左右両端に、縦に繰り返しで、画像を背景として入れたいのですがどうすればよいのでしょうか? <STYLE type="text/css"> <!-- BODY { background-image : url("~~.gif"); background-position: left; background-repeat: repeat-y;} --> </STYLE> スタイルシートを使って、とりあえず左にだけ入れることは出来ました。 このあとを教えてください。お願いします。

    • ベストアンサー
    • HTML
  • CSSで背景画像マウスオーバー

    スタイルシートのマウスオーバーについて質問です。 <div class="AAA"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> (css)ーーーーーーーーーーーーーーーーーーーーーーーー .AAA { background-image: url("http://xxxxx_back.gif") } 上記の状態で、「xxxxx.gif」の背景に「xxxxx_back.gif」を表示させるまでは 思い通りに出来たんですが、 背景表示はマウスオーバーの時だけにしたかったので、 <div class="BBB"> <div style="margin-top: 22px;"><img src="http://xxxxx.gif"></div> </div> (css)ーーーーーーーーーーーーーーーーーーーーーーーー .BBB a:hover { background-image: url("http://xxxxx_back.gif") } という風にしたんですが、 BBBにすると、オーバー時の表示は出来ましたが、背景画像がズレてしまいます。 AAAの時の表示位置は正確です。 AAAとBBBの違いは常時表示か、マウスオーバー表示かの違いしかないと思うのですが、 何故でしょうか。 ※safariで検証しました。 ※style="margin-top: 22px;"は都合上入れてます。

  • グラデーション背景と画像固定背景

    こんにちは。 ホームページ作成初心者の者なのですが、ページの背景をグラデーション背景の上に固定した画像背景を乗っけようと考えているのですが、グラデーション背景のタグを入れると画像背景のタグが無効になってしまいます。この二つを同時に有効にする事は不可能なのでしょうか。 ちなみにタグは <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でテーブルを作り、スクロールできる仕様にしました。そこに背景画像を入れたのですが、スクロールの際に一緒に背景画像もスクロールしてしまいます。 文字などだけをスクロール可能にして、背景画像を固定にする方法を知っている方は教えてください。 私のソースは下記です。よろしくお願いします。 <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>

  • ネスケで背景を表示する際に

    ネスケで背景を指定する際に、困ったことが起きてしまいます。まず横700のテーブルのTDに指定して貼り付けますが 、そのうえからまたテーブルを組んで、セルを作ると、背景が繰り返してしまいます。CSSで定義してますが、できません。この教えて・・・でも同じような質問があったのですが、真似しても、テーブルのみだったら背景はきっちり表示されますが。リピート禁止にしてもだめです。 cssはこうです。 <STYLE TYPE="text/css"> .img01{ background-image:url(img/back01.jpg); background-repeat:no-repeat; background-position:50% 50%; } </STYLE> できれば、cssでなくタグのみでできればいいのですが・・・