図のような表をtableタグで作っている場合
青 :壁紙なし
赤 : bg01 を横につなげて(繰り返しではない図)
緑 : bg02 を横につなげて(繰り返しではない図)
紫 : bg03 を横につなげて(繰り返しではない図)
※各画像は表にピッタリのサイズ
のようにしたい場合はどのようにすればいいのでしょうか。
background-position: center ;
background-attachment: fixed ;
とすると画像が1枚に繋がるのですが表の中でスクロールしてしまい困ってます。
テーブル内では通常スクロールが発生しませんので、「background-attachment: fixed;」は必要ないと思います。
任意の位置に表示するには、テーブルおよびセルの幅、高さを指定して、「background-position」で位置をpx指定で調整します。
※今回は必要ないと思いますが、「background-attachment」の動作仕様については次のページが参考になると思います。
・トップ > CSSリファレンス > background-attachment
http://www.tohoho-web.com/css/prop/background-attachment.htm
※「background-attachment」の動作についてですが、おそらくGoogle Chromeでは「fixed」の動作でバグがあります。
※また、「background-image」についてもバグがあるようです。
trまたは「display: table-row;」を指定した要素に「background-image」プロパティを指定した場合、tdあるいは「display:table-cell;」を指定した子要素ごとにレンダリングされます。(デベロッパーツールの「Styles」および「Computed」パネルでは正常に解析されています。)
この為、現時点ではtrではなくtdに指定して調整する必要があります。
※上記2点について、「Google Chromeの設定」「ヘルプと概要」→「問題の報告」からフィードバッグを送信したので、今後修正されるかもしれません。
何か工夫を加えたテーブルなのでしょうか?
テーブル内では通常スクロールが発生しませんので、「background-attachment: fixed;」は必要ないと思います。
テーブルおよびセルの幅、高さを指定して、「background-position」で位置をpx指定すると希望の表示にならないでしょうか?
※今回は必要ないと思いますが、「background-attachment」の動作仕様については次のページが参考になると思います。
・トップ > CSSリファレンス > background-attachment
http://www.tohoho-web.com/css/prop/background-attachment.htm
「background-attachment」の動作についてですが、おそらくGoogle Chromeでは「fixed」の動作でバグがあります。
Firefoxなど別のブラウザでも確認してみてください。(Firefoxでは説明のとおりの動作でした。)
すみません 誤記ですね。セル(横3つ)の間違いです、ご指摘ありがとうございます。
google chromeで確認していました、firefoxで確認したところ期待通りの動作をしました。
>>テーブルおよびセルの幅、高さを指定して、「background-position」で位置をpx指定すると希望の表示にならないでしょうか?
指定したところ位置もピッタリ揃いました。解決しました。 ありがとうございます。
もしよろしければベストアンサーを差し上げたいのですが回答の方に一言いただくことはできないでしょうか?
特に追記する事はありませんので、コメントの内容をほぼそのまま転記しました。
バグについてのみいくらか追記しています。