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; } } |
お役に立てましたらadsenseクリックお願いします！
いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！
関連記事
-
2025.05.19 wordpressテンプレートページでも「非公開」にする方法（ログイン者だけ見える） -
2023.06.20 BackWPupの使い方・復元の仕方 -
2020.12.09 psdで印刷物を作る時のまとめ -
2023.11.07 Googleビジネスプロフィール登録方法（旧グーグルマイビジネス）
-
2023.12.22 投稿ページやカスタム投稿タイプでも カスタムテンプレートを使用できるようにする
-
2018.11.15 firefoxのバージョンとfirebugの互換性
