【CSS】背景画像固定スクロールの実装方法【DEMO】 - N-PLUS.work

ホーム » N-PLUS 全記事一覧 » DEMO » 【CSS】背景画像固定スクロールの実装方法【DEMO】

【CSS】背景画像固定スクロールの実装方法【DEMO】

CSS／DEMO

■HTML CODE

<aside>
<div id="background-fixed">
<p>背景画像の固定</p>
</div>
</aside>

■CSS CODE

aside {
margin:0 0 600px 0;
padding:0;
}
div#background-fixed {
width: 70%;
height: 200px;
background-image: url("https://n-plus.work/wp-content/uploads/2017/10/img004.jpg");
background-attachment: fixed;
margin:0;
padding:0;
}
div#background-fixed > p {
color:#fff;
font-weight:bold;
text-align:center;
margin:0;
padding:2% 0 0 0;
}