画像の左下に背景カバー画像を配置しようとしています(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
と、床にラグが敷かれているのがわかります。