ノート[sample2]

昨日:9 今日:8 合計:29217 
▽2015/08/30(Sun)
スマホ(iPhone/Android)に背景画像
スマホ(iPhone/Android)に対応
PCも問題ないようだがPCはPCで振り分けておくのが良いかも

【body要素直下に置く】

<div class="bgimage"></div>


---------------


.bgimage{
background:url("画像のURL") no-repeat left top;
-webkit-background-size:100% auto;
-moz-background-size:100% auto;
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:-1;
}




【bodyに直接】

body::before{
background:url("画像のURL") no-repeat left top;
-webkit-background-size:100% auto;
-moz-background-size:100% auto;
background-size:100% auto;
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:150%;
padding-bottom:108px; // iOS7対策
content:"";
z-index:-1;
}




スマホの背景画像は固定じゃないと気持ち悪い場合があるのでメモ
category:CSS/スタイルシート
ノートTOPへ
フッタメニュー
ALICE+
最下部の編集もできます