0

これを尋ねる前に、私はグーグルでいろいろなことを自分で試してみました....解決策が見つからなかったとしても、これを達成できることはわかっています。

これはサイトです...

http://spiralout.org

本文の背景画像は、ロゴの中央 (幅 1440) に中央揃えされていますが、スクロールすると固定されていることに注意してください。それは素晴らしいことです。

これをレスポンシブにするにはどうすればよいですか？

現在、さまざまなブレークポイントで background-position を使用していますが、それは実際の解決策ではありません...たとえば。現在は 1440 に配置されていますが、1280 (4 列を維持しながら最小の幅) またはそれ以上に下げると、私が話していることがわかります。背景画像をロゴ div に「追従」させるにはどうすればよいですか?

背景位置にパーセンテージを使用してみましたが、ロゴの幅が異なり、コンテナー内にあるため、画面の左側からのパーセンテージは常に背景画像に比例して変化します。

ロゴ div の背景画像として使用しようとしましたが、上部または左側にオーバーフローしない理由がわかりません。この解決策が機能したとしても、固定位置を維持することはできません。

どんな助けでも大歓迎です。

これを行うことのコスト/メリットがばかげているかどうか、または解決策がjQueryである必要があるかどうかなどは気にしません。自分のためにそれを達成する方法を知りたいだけです:)

4

1 に答える 1

0

私が正しく理解していれば、これは私がそれを行うのに必要なことだけです:

body 
{
  background-image: url('whatever image');
  background-repeat: no-repeat;
  background-attachment: fixed;
}
于 2013-09-28T20:08:03.257 に答える