TABLEの背景画像をCSSに変更したい
- CSSを使用してTABLEの背景画像を指定する際に、途中で切れる問題が発生しています。背景イメージを制御するためにJavaScriptの使用が必要になるかもしれません。
- 現在はTABLEで連続する背景画像を指定していますが、CSSのbackground-imageで指定すると途中で切れてしまいます。
- 背景画像の高さはA=B=Cであり、背景イメージA、B、Cのいずれかの境界で背景を終わらせる方法を教えてください。
- ベストアンサー
TABLEの背景画像をCSSに変更したい。
今までTABLEを使って背景画像を指定していたのですが、CSSに変更したいと考えています。 現在はTABLEで図１のようにABC A'B'C' A''B''...と連続する背景画像を＜図３＞のカラム「ロ」に入れています。 これをCSSのbackgroud-imageで指定すると図２のB'ように途中で切れてしまいます。 これを背景イメージＡ，Ｂ，Ｃのいずれかの境界で背景を終わらせるようにコントロールすることはできないものでしょうか。 CSSだけで指定するのは困難なように思います。 JAVA Scriptとの併用になるのでしょうか。 CSSは基本的な使い方は理解しているつもりですが、JAVA Scriptは読める程度で書くことはできません。 わかりにくい説明で申し訳ありませんがどなたか教えていただければ助かります。 よろしくお願いします。 なお背景画像の高さはA＝B＝Cです。 背景画像は＜図３＞のカラム「ロ」、カラム「イ」「ロ」はコンテンツしだいで下に伸びます。 ＜図１：背景イメージ＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ＜図２：backgroud-imageによる指定＞ ■■■ ┐ ■■■ A ■■■ ┘ □□□ ┐ □□□ B □□□ ┘ ◆◆◆ ┐ ◆◆◆ C ◆◆◆ ┘ ■■■ ┐ ■■■ A' ■■■ ┘ □□□ ┐ □□□ B' ┘ ＜図３：現在のカラム（TABLEで指定）＞ ┌─────────┐ │┌─┐┌─┐┌─┐│ ││ ││ ││ ││ ││イ││ロ││ハ││ ││ ││ ││ ││ │└─┘└─┘└─┘│ └─────────┘
- toutetsu
- お礼率35% (25/71)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
Javascriptを使用して、ブロックの大きさを調整する方法のサンプルです。 <html> <head> <title>test</title> <style type="text/css"> <!-- div{background-color:#ccc;}/*ブロックの大きさ確認用*/ --> </style> <script type="text/javascript"> <!-- function heightAdjust(Id,H){ var Obj = document.getElementById(Id); alert(Obj.offsetHeight); // 確認用alert(調整前) if(! Obj) return; if(Obj.offsetHeight % H) { Obj.style.height=(parseInt(Obj.offsetHeight / H) +1) * H; } alert(Obj.offsetHeight); // 確認用alert(調整後) } //--> </script> </head> <body onload="heightAdjust('hoge',20)"> <!-- ID='hoge'のブロックの高さを20の倍数に調整します。 --> <div id="hoge"> <p>適当な<br>高さになる<br>文章。</p> </div> </body> </html>
その他の回答 (1)
- steel_gray
- ベストアンサー率66% (1052/1578)
A/B/Cの境界に自動で合わせる事はCSSもTableの背景としても無理そうなのですが、どのようにしているのでしょうか？ 自動であわせるというより、セル/テーブルの高さを固定するのであればCSSでも同じようにブロックの高さを指定すればよいと思うのですが。
補足
ご回答ありがとうございます。 説明不足だったようで申し訳ありません。 > A/B/Cの境界に自動で合わせる事はCSSもTableの背景としても無理そうなのですが、どのようにしているのでしょうか？ これは＜図３＞のカラム「イ」と「ハ」を例えばrowspan="20"というようにまとめ、カラム「ロ」のTABLEセルを上からひとつひとつ■、□、◆の順番に塗ることで対応しています。 背景の入るセルには高さを指定していますが。TABLEの高さ自体は指定していません。 > セル/テーブルの高さを固定するのであればCSSでも同じようにブロックの高さを指定すればよいと思うのですが。 ブロックの高さを指定すれば簡単にできることは重々承知しております。 質問にも書きましたが、コンテンツしだいで下に伸びていき、また変動することもあるためブロックの高さは指定したくないのです。 CSSだけでは実現不可能のように思えましたので、JAVA Scriptの併用で何とかならないかとかすかな望みを持って質問させていただきました。 もしJAVA Scriptとの併用でも不可能ということであればあきらめますので、解決策または可・不可がわかる方のご回答お待ちしております。
関連するQ&A
- テーブル全体に背景画像
こんにちは。お世話になっています。 ホームページで、テーブル全体に背景画像を貼り付けたいのですが、 <table background=URL>またはCSSで table{background-image: URL;} と指定しても何も貼り付けることができません。 一つのセルにだけ貼り付けるとうまくいくのですが何か原因があるのでしょうか？アドバイスをよろしくお願いいたします。
- ベストアンサー
- HTML
- HTMLでテーブル内の背景画像固定方法は？
HTMLでテーブルの背景に画像を指定することは可能ですが、その背景画像を繰り返さないように指定したり、位置を指定したりすることはできるのでしょうか。 CSSではなくHTMLで指定できるのかどうか、また出来るのであればそのサンプルを教えて頂けると助かります。
- 締切済み
- HTML
- テーブルに背景画像を入れたいのですが……
CS5でホームページを作っていますが、CSSとかhtmlはまったくといっていいほど理解していません。 テーブルを挿入して組みあせているだけの初歩的な作り方なのですが、いろいろわからないことばかりです。 質問ですが、ページ全体への背景画像はできるのですが、テーブルに対する背景画像の設定は可能でしょうか。 下記のページのテーブル内の挿入画像をいくつか背景画像にして、その上にテキストを入れたいのです。 http://www.kajimaya.info/ http://ryukyugeino.jpn.com/ すみませんが、超初心者向きのご教示をいただければありがたいです。 どうかよろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- CSSで背景画像指定
どなたかアドバイスお願いします。 CSSを使って<p></p>の中に背景画像を指定した場合<p></p>の中は背景指定のみでタグの中は内容が何も無い状態です。 テーブルを使ってのレイアウトの場合spacer.gifなどを使えば解決できるのですが。 CSSのみでのレイアウトの場合はHTMLタグの中の要素が空になってしまう場合 は、どのように対処すればよろしいのでしょうか？
- ベストアンサー
- CSS
- 背景画像がテーブルに透けてしまう
<body background="画像のURL"> <STYLE TYPE="text/css"> <!-- BODY { background-color: white} --> </STYLE> <Table Border="1" Width="サイズ"> <Tr> <Td ColSpan="サイズ" Align="位置">～ という感じでページを作っているのですが、 背景の画像が透けてテーブルの中の文字が見え難く 困っています。 テーブルの中は「white」で白に指定している つもりなのですが、白になりません。。 このタグでテーブルの中を背景が反映されず真っ 白にする方法ってあるのでしょうか？ 調べてみたのですがどうも分からないので教えて下さい。
- ベストアンサー
- レンタルサーバ・ASP
- HTML、CSSについて。テーブル背景がズレる。
こんにちは。よろしくお願いします。 HTMLとCSS、2つのファイルを作成しています。 HTMLでテーブルを作成し、<td><div=名前></div></td> として、テーブルの中身はCSSにまかせています。 複数列、複数行ありますがdiv名はひとつずつ違うのが付いています。 CSSでは、 div#名前 { width: 20px; height: 20px; margin: 0px; padding: 0px; background: url(画像名.gif); } ・ ・ ・ htmlを表示させてはcssのpxを調節し、 きれいな背景画像付きのテーブルが完成した！と思ったのですが、 ブラウザの文字サイズを最大に変更すると崩れてしまいました。 pxではなくて%で指定してみても崩れます。 解決策をご存知の方、教えてくださると有難いです。 よろしくお願いします。
- 締切済み
- HTML
- jQueryでCSSの背景画像を切り替えたい
見出しをクリック後にCSSで指定している背景画像を変えるため、jQueryでCSSを変更させてみたところ上手くいきません。 jQueryで指定する変更後の背景画像を絶対パスに換えたら上手くいったので、 パスの指定方法が悪いところまでは分かったのですが、相対パスでの指定方法がわからなくなりました。 WordPress環境で下記のコードを使用しています。 ご教授の程、よろしくお願い致します。 【 jQuery】 ○ディレクトリ ： テーマフォルダ/js/change.js jQuery(function() { jQuery("h3 div.class").hide(); jQuery("h3").click(function() { jQuery(this).next().slideToggle("fast"); jQuery(this).css("background-image" , "url('img/pic2.jpg')"); }); }); 【CSS】 ○ディレクトリ : テーマフォルダ/style.css h3 { background: #7c8187; background-image: url(img/pic.jpg); cursor: pointer; } 【画像】 ○ディレクトリ : テーマフォルダ/img/pic.jpg テーマフォルダ/img/pic2.jpg
- ベストアンサー
- CSS
- cssで背景画像が貼れない
background-image: url(××.gif) ｃｓｓで背景画像を表示させたいのですがこのタグだとどうしても 表示されません。 画像は同じフォルダにあります。 どなたかご教授願えませんでしょうか お願いします。
- 締切済み
- HTML
- イメージマップ内での画像の変更【HTML・CSS・Java】
<img src="imagemaptest.bmp" usemap="#imagemaptest" border="0"> <map name="imagemaptest"> <area shape="rect" coords="152,167,359,451" href="***.html"> このようなタグでイメージマップを作成します。 そしてcoords="152,167,359,451"で指定したリンクにマウスオンした時に画像を変更する事は可能でしょうか？簡単に言うと画像の中のリンクにマウスを当てると指定した部分だけ画像が変更される方法です。 また、 background="test.jpg"でTABLE内に背景を指定し、その背景にリンクを張ることはかのうでしょうか？ おわかりになる方、お教え下さい(・・*)JavaでもCSSでもかまいません☆
- ベストアンサー
- HTML
- CSSで背景画像の固定
よろしくお願いいたします。 現在、WEBページを制作しておりまして CSSで背景画像を固定する方法で悩んでいます。 通常、背景画像を固定する際、 #contents { display:block; width:500px; height:500px; margin:0; background-image:url(img/hoge.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:bottom; } この様な感じで可能だと思うのですが、 今回やりたい事が出来ずに悩んでいます。 やりたい事が私の文章力では説明で伝わるか わかりませんので画像にしてみました。 図Aの様に「#contents」のブロック内の下段に固定に したいと思っているのですが、 実際上記の様なCSSの記述ですと図Bの様に ウィンドウの高さに対しての下段固定になってしまい ウィンドウを伸ばすと、「#foot」ブロックの後ろに 回ってしまい全体を表示してくれません。 どなたか、解決方法がおわかりになる方 ご教授願えますでしょうか。 また、過去同じ質問がありましたら、 お手数おかけいたしますがご誘導願えますでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
お礼
お返事が遅くなってすみません。 ＭＡＣのブラウザでの検証に手間取っていました。 製作していただいたものはまさに自分が希望していたものそのものでした。 これでようやくＣＳＳに移行することができます。 本当にありがとうございました。