滿版背景圖片置中問題
在測試圖書管理系統網頁時,發現到用chrome的手機檢視模式,頁面都很正常
但實際拿手機檢測時,卻發現跑版的問題
如下圖
^這是在chrome的手機檢視模式 ^這是手機檢視(用chrome開啟)
^網頁版斷點測試
css cod
body {
background-image: url("/background/background.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover; }
在手機檢視時,背景圖片就會跑位
不會乖乖在中央展開
測試過各種品牌的Andrews手機
都發生同樣的情況
(手邊沒有iOS手機,就沒有測試到)
可是偏偏在chrome的手機檢視模式卻都沒有問題
這樣超級麻煩的啊!!!
手機版chrome又無法直接檢視除錯
只好求助業界朋友
介紹手機遠端debug工具
網址如下
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
設定好開始debug
結果問題非常簡單
html {
height: 100%; }
body {
background-image: url("/background/background.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover; }
只要在html設定 height:100%
就可以解決在手機版背景圖片沒有滿版置中的問題