• 締切済み

<td>内で背景縦100%リピートする方法

こんにちは。 現在ホームページを作成しているんですが、 凄く簡単そうなところで躓いてしまってます>< どうも上手くいかなくて… 分かる方いらっしゃったらご教授ください!! 今<td>内の背景をCSSで100%縦にリピートさせようとしています。 どうしてもCSSを使わなくてはいけないのは、 pngの透過をCSSでfilterを用いてbackgroundとして使ってるからです。 いくつか参考になりそうなサイトはあったんですが、 filterを使ってるからか(多分自分のミスだと思いますが;)上手くいきません。 今やりたいと思っているのはこんな状態です。 ■■■■■■■ ⇒<img src="イメージ1" width="200" height="10"> □□□□□□□ ⇒CSSで縦リピートしたい部分 □□□□□□□ □□□□□□□ □□□□□□□ ■■■■■■■ ⇒<img src="イメージ2" width="200" height="10"> これが<td height="100%" id="test"></td>の中に入ってる感じです。 ■(黒い四角)は角丸のにしたかったのでイメージにしました。 でもこうしてCSS上で□(上記の白四角の部分)の高さを 100%にすると、下のイメージ2の部分が消えて見えなくなってしまいます; ■の部分と□の部分をテーブルで分けてもダメでした。。 因みにCSSは以下の方法を試しました。 (1)普通に100%指定 height: 100%; (2)htmlとbodyにも指定 html, body {       height: 100%; } body > #test {       height: auto; } (3)htmlとbodyにも指定その2 html, body {       height: 100%; } body > #test {       height: 100%; } height98%とかも試したんですが、 2カラムの縦の高さをそろえたいとなると、 ブラウザやフォントサイズによってばらつきがでるので、 非常にこまってます; どなたか分かる方いらっしゃったら教えてもらえませんか? 宜しくお願い致します。

みんなの回答

回答No.1

透過のfilterってAlphaImageLoaderですか? もしAlphaImageLoaderならプロパティの指定が間違ってるのかもしれません (そもそもこのフィルタには縦や横への指定がない)

chinka
質問者

補足

tenderfeelさん> ご回答ありがとうございます。 AlphaImageLoader使ってます。。 確かにいろいろ弄っていて背景がつぶれたりいろいろして 変だなぁとは思っていたんです。 現在このようにしています。 #test { height: 100%; margin: 0px; padding: 0px; background-repeat: repeat-y; } html>body #test { background-image:url(イメージ名.png); } *html body #test { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=イメージ名.png sizingMethod=scale); } これのrepeat-yが使えないということでしょうか? もしそうであれば、それを回避してrepeat-yを生かす方法が 他にあれば教えていただくことは出来ませんでしょうか? よろしくお願いします。

関連するQ&A