css ＰＣで背景固定演出→スマホでは背景普通演出にする方法

19.06.10

よくページをスクロールすると背景だけがスクロールされず固定される演出ありますよね。サイトに奥行きが表現されて私も大好物の演出です。
ですがこの背景を固定するcss、スマホ用にレスポンシブした場合はなぜか効かないんですよね…。
それができれば問題ないのですが、今のところ方法が編み出せないので…。
「ＰＣでは背景を固定する演出」を「スマホではを普通演出に（スクロール）」させる方法の紹介です。

cssにＰＣバージョンの要素とスマホの要素を２つ記入。

スマホで背景固定演出すると、どうしても背景画像が大きく映り込んでしまうんですよね…なのでその回避方法です。

#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;
	
	}	
}

#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をポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« wordpress １つのサーバーで複数のサイトを設置する方法（サクラサーバー）

wordpress 301リダイレクトでサイト引越しやドメイン引継ぎを行う。 »

css ＰＣで背景固定演出→スマホでは背景普通演出にする方法

cssにＰＣバージョンの要素とスマホの要素を２つ記入。

お役に立てましたらadsenseクリックお願いします！

関連記事