3

画像の左下に背景カバー画像を配置しようとしています(background-position: 0% 100%;)と同時に、画像がスクロールしないように位置を修正します。

問題は、使用background-position時に無視されていることbackground-attachment:fixedです。

いくつかのサンプル HTML:

<div class="title-section">
  <div class="wrap">
    <h4 class="widget-title widgettitle">My Cool Title</h4>
  </div>
</div>
<div class="footer-section"></div>

そして関連する CSS:

.title-section {
  background-image: url(image.jpg);
  background-position: 0% 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

スクロールするように削除background-attachmentまたは変更すると、画像が正しく配置されます。画像を固定位置に保持するには何が必要ですが、その位置は画像の左下になりますか?

タグを介して画像を追加しようとしました<img>が、それも機能しません。

コードで遊んでみたい場合は、こちらの JS Fiddle に追加しました: http://jsfiddle.net/bradonomics/xtjmyv7y/2/

プロパティである CSS の 5 行目を取り出すbackground-attachmentと、床にラグが敷かれているのがわかります。

4

0 に答える 0