すべての主要なブラウザーで動作する、レスポンシブで固定された背景を作成しようとしています。
基本的に、私は典型的な background:cover の動作 (ブラウザーのサイズに合わせてスケーリング) を使用していますが、視差効果を作成するために背景を固定したいと考えています。
もしそうなら、これは可能ですか？
これまでの CSS は修正なし:
#front_header {
background: url(1.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front_header .featured {
width: 100%;
max-width: 950px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
#front_header .txt {
margin: 19.5% 0 19.5%;
text-align:center;
display: block;
}
本文 HTML:
<section id="front_header">
<div class="featured">
<div class="txt">
<h2>Test</h2>
</div>
</div>
</section>
ご覧のとおり、これをサイズ変更すると、背景がわずかにサイズ変更されます。ただし、追加すると
background-attached:fixed;
背景のサイズが変更されなくなりました。固定された背景のように動作するだけです。