css ＰＣで背景固定演出→スマホでは背景普通演出にする方法
19.06.10
よくページをスクロールすると背景だけがスクロールされず固定される演出ありますよね。サイトに奥行きが表現されて私も大好物の演出です。
ですがこの背景を固定するcss、スマホ用にレスポンシブした場合はなぜか効かないんですよね…。
それができれば問題ないのですが、今のところ方法が編み出せないので…。
「ＰＣでは背景を固定する演出」を「スマホではを普通演出に（スクロール）」させる方法の紹介です。
cssにＰＣバージョンの要素とスマホの要素を２つ記入。
スマホで背景固定演出すると、どうしても背景画像が大きく映り込んでしまうんですよね…なのでその回避方法です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
#wrap{ height:350px; margin-top:200px; background-color: #464646; background-image: url("images/back.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; min-width: 1140px; width: 100%; background-attachment: fixed; } /*↓上の要素をスマホで見たときだけ背景を動かさなくする*/ @media only screen and (max-width: 750px) { #wrap{ height: 350px; margin-top: 200px; background-color: #464646; background-image: url("images/back.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; min-width: 1140px; width: 100%; background-attachment: scroll; } } |
関連記事
-
2022.03.09 カスタムフィールドで作ったフィールドを他のページに表示する方法。 -
2023.05.26 Slick 画像の幅を固定したままで、左右隅々まで無限カルーセルする方法 -
2022.04.25 Xサーバーでwordpressのサイトを複数追加する方法
-
2018.11.09 サクラサーバーで無料ＳＳＬを利用する方法
-
2018.11.20 カスタム投稿設定方法
-
