【CSS】背景画像を固定する方法を解説
See the Pen parallax1 by CODE SQUARE (@Coffee1610) on CodePen.
section < width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; >.bg1, .bg2, .bg3 < width: 100%; height: 100vh; /*背景画像の位置を固定する*/ background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat; >.bg1 < background-image:url('画像のパス'); >.bg2 < background-image:url('画像のパス'); >.bg3CSSの解説
19行目：background-attachment: fixed;
background-attachment: fixedは背景画像の位置を固定するCSSのプロパティです。
この実装方法は背景画像を指定している要素にbackground-attachment: fixedを指定するだけなので簡単なのですが、iosではうまく表示されません。
iosではbackground-attachment: fixedが効かないようで背景画像の位置は固定されていません。 Webサイトのスマホへの対応は必須になっている事が多いと思うので、この実装方法は現時点では避けたほうがいいかもしれません。
3. position:fixedとclip-pathで背景画像を固定する
iosでも背景画像を固定表示するにはposition:fixedとclip-pathを使います。コードの例は以下のとおりです。CodePenの「Run Pen」を押して確認してみてください。
clip-path を使ってスマホで背景を固定表示する方法 - by Takumi HirashimaSee the Pen parallax2 by CODE SQUARE (@Coffee1610) on CodePen.
section < width: 100%; height:100vh; display: flex; justify-content: center; align-items: center; >.bg-wrapper < position: relative; width: 100%; height: 100vh; /*範囲外の背景画像を隠す*/ clip-path: inset(0); >.bg1, .bg2, .bg3 < /*背景画像の位置を固定する*/ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; >.bg1 < background-image: url("画像のパス"); >.bg2 < background-image: url("画像のパス"); >.bg3CSSの解説
20行目：clip-path: inset(0 0 0 0);
clip-path:inset()は指定した要素を矩形（四角形）に切り取るプロパティです。引数は要素の大きさからどのくらいの幅を切り取るか(上 左 下 右の幅の順)を指定します。
26行目：position: fixed;
4. まとめ
関連記事
【HTML WordPress】WebサイトにGoogleマップを埋め込む方法について解説 【HTML JavaScript】details・summaryタグでアコーディオンメニューを作る方法(開閉アニメーションにも対応) 【CSS】iOSの電話番号の自動リンクを無効にする方法 【JavaScript】ToDoリストの作り方を解説 【WordPress】管理バーの位置を上下に切り替えることができるプラグインを紹介プロフィール
サイト内検索
カテゴリー
アーカイブ
よく読まれている記事
【CSS JavaScript】シンプルなローディング画面の作り方を解説 【JavaScript】スムーススクロールを実装する方法 【JavaScript】input type=”date”の日付フォーマットを変更する方法を解説 【CSS】iOSの電話番号の自動リンクを無効にする方法 【CSS】背景画像を固定する方法を解説目次
- 1. スクロールするときの動き
- 2. background-attachement:fixedで背景画像を固定する
- 3. position:fixedとclip-pathで背景画像を固定する
- 4. まとめ
- 1. スクロールするときの動き
- 2. background-attachement:fixedで背景画像を固定する
- 3. position:fixedとclip-pathで背景画像を固定する
- 4. まとめ