1447179337 html cssについての質問です


図のような表をtableタグで作っている場合
青 :壁紙なし
赤 : bg01 を横につなげて(繰り返しではない図)
緑 : bg02 を横につなげて(繰り返しではない図)
紫 : bg03 を横につなげて(繰り返しではない図)
※各画像は表にピッタリのサイズ

のようにしたい場合はどのようにすればいいのでしょうか。
background-position: center ;
background-attachment: fixed ;
とすると画像が1枚に繋がるのですが表の中でスクロールしてしまい困ってます。

回答の条件
  • 1人50回まで
  • 登録:2015/11/11 03:15:37
  • 終了:2015/11/23 23:26:05

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数593ベストアンサー獲得回数3502015/11/17 03:32:21

テーブル内では通常スクロールが発生しませんので、「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の設定」「ヘルプと概要」→「問題の報告」からフィードバッグを送信したので、今後修正されるかもしれません。

id:ryo0821

すみません BA遅くなりました ご回答有り難うございました。

2015/11/23 23:26:37
  • id:rouge_2008
    各画像は3枚で、セルではなくテーブルにぴったりのサイズなのですか?
    何か工夫を加えたテーブルなのでしょうか?
    テーブル内では通常スクロールが発生しませんので、「background-attachment: fixed;」は必要ないと思います。
    テーブルおよびセルの幅、高さを指定して、「background-position」で位置をpx指定すると希望の表示にならないでしょうか?


    ※今回は必要ないと思いますが、「background-attachment」の動作仕様については次のページが参考になると思います。

    ・トップ > CSSリファレンス > background-attachment
    http://www.tohoho-web.com/css/prop/background-attachment.htm
  • id:rouge_2008
    動作確認に利用したブラウザは何でしょう?
    「background-attachment」の動作についてですが、おそらくGoogle Chromeでは「fixed」の動作でバグがあります。
    Firefoxなど別のブラウザでも確認してみてください。(Firefoxでは説明のとおりの動作でした。)
  • id:ryo0821
    >>各画像は3枚で、セルではなくテーブルにぴったりのサイズなのですか?
    すみません 誤記ですね。セル(横3つ)の間違いです、ご指摘ありがとうございます。
    google chromeで確認していました、firefoxで確認したところ期待通りの動作をしました。

    >>テーブルおよびセルの幅、高さを指定して、「background-position」で位置をpx指定すると希望の表示にならないでしょうか?
    指定したところ位置もピッタリ揃いました。解決しました。 ありがとうございます。
    もしよろしければベストアンサーを差し上げたいのですが回答の方に一言いただくことはできないでしょうか?
  • id:rouge_2008
    遅くなってすみません。
    特に追記する事はありませんので、コメントの内容をほぼそのまま転記しました。
    バグについてのみいくらか追記しています。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません