【忘備録】iOSにも対応した背景固定の方法【CSS擬似要素で実装】
CSSの擬似要素を使って背景を固定する方法
この記事ではCSSの擬似要素を使って、背景を固定する方法を記載しています。
参考になった人はコピペして使って下さい。
background-attachment: fixed;
background-size: cover;
上記のコードでも背景を固定することはできますが、iOSでは動きません。
別の方法として擬似要素に背景を持たせて、それを固定するという方法があります。
<div class="parent">
<div class="child">
<h2>Title</h2>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
</div>
<div class="child">
<h2>Title</h2>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
</div>
<div class="child">
<h2>Title</h2>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
</div>
<div class="child">
<h2>Title</h2>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
</div>
<div class="child">
<h2>Title</h2>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
</div>
<div class="child">
<h2>Title</h2>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
</div>
<div class="child">
<h2>Title</h2>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
<p>text text text text text text text text text text text text </p>
</div>
</div>
.parent:before{
content:"";
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background:url(https://images.unsplash.com/photo-1526025202335-cf944dc3f799?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60) center no-repeat;
background-size:cover;
}
.child{
margin: 50px auto;
text-align: center;
font-size: 1.6rem;
color: white;
}
.child:nth-child(even){
color: salmon;
}
これで背景が固定されました。
.parent:before{
content:””;
display:block;
position:fixed;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background:url() center no-repeat;
background-size:cover;
}
ここで重要なコードは上記の部分ですね。
擬似要素に背景を指定して固定しています。
個人的な忘備録ですが、参考になった人はコピペして使ってください。