質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1955閲覧

background-imageをfixedさせたい

nakaji-junk

総合スコア3

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2020/08/19 05:21

background-imageをある一つのsectionに固定したいのですが下記の記述だとiOSで効いてくれないので代わりの方法を教えてください。

background-size: cover ;
background-attachment: fixed;
→iOSは一緒に使えない。

・androidでは問題なく固定されます。
・キャッシュの削除は試しています。

HTML

1 <section class="genre"> 2 <div class="genre_wrapper"> 3 <div class="genre_content"> 4 <div class="genre_bgc"> 5 </div> 6 <img src="image/genre1.jpg" alt="キャンプ"> 7 <div class="genre_subject"> 8 <p>キャンプ</p> 9 </div> 10 <div class="genre_moreBtn"> 11 <p>more</p> 12 </div> 13 </div> 14 <div class="genre_content"> 15 <div class="genre_bgc"> 16 </div> 17       ~~以下略~~

CSS

1.genre{ 2 height: 100vh; 3 position: relative; 4 &::after{ 5 position: absolute; 6 top: 0; 7 left: 0; 8 height: 100vh; 9 width: 100%; 10 background-image: url(../../image/img3.jpg); 11 background-repeat: no-repeat; 12 background-position: 50% 50%; 13 background-size: cover ; 14 background-attachment: fixed; 15 z-index: -50; 16 content: ''; 17 }

『試したみた事』

①background-size: 100% 100%;
→画面が拡大し過ぎてNG。

②position: fixedで固定
background-attachment: fixedを消してabsoluteをfixedに変更。

CSS

1.genre{ 2 height: 100vh; 3 position: relative; 4 &::after{ 5 position: fixed; 6 top: 0; 7 left: 0; 8 height: 100vh; 9 width: 100%; 10 background-image: url(../../image/img3.jpg); 11 background-repeat: no-repeat; 12 background-position: 50% 50%; 13 background-size: cover ; 14 z-index: -50; 15 content: ''; 16 }

→background-imageがHTML全体に効いてしまう。

position: fixedを親要素にのみ効かせたいのですが、調べても解決できませんでした。

宜しくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

iOSでの背景画像は、coverとfixedを一緒につかえない仕様になっているので、
WEBで検索すると、困っている人もたくさんいるようです。

でも、以下のように、背景画像を擬似要素に適用するとできますよ。

css

1body::before{ 2 content:""; 3 top:0; 4 left:0; 5 z-index:-1; 6 width:100%; 7 height:100vh; 8 display:block; 9 position:fixed; 10 11 background-image:url(画像パス); 12 background-size:cover; 13}

投稿2020/09/08 22:24

geta

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問