cssで背景画像を全画面表示して固定する方法、もう毎回毎回ググることになっているのでいい加減まとめることにした。
iPadにも対応させるにはこちら:
1 2 3 4 5 6 7 8 9 10 11 12 |
body:before{ content:""; display:block; position:fixed; top:0; left:0; z-index:-1; width:100%; height:100vh; background:url(./bg.jpg) center no-repeat; background-size:cover; } |
さらに背景画像がIE11でガタつかないようにするには以下:
1 2 3 4 5 6 7 8 9 10 |
if(navigator.userAgent.match(/MSIE 10/i) || navigator.userAgent.match(/Trident\/7\./) || navigator.userAgent.match(/Edge\/12\./)) { $('body').on("mousewheel", function () { event.preventDefault(); var wd = event.wheelDelta; var csp = window.pageYOffset; window.scrollTo(0, csp - wd); }); } |
参考にしたサイト: