背景圖片在臺式機上很好，但在手機/平板電腦上變形

我一直在試圖解決這個問題，過去幾個小時，但我沒有得到任何地方，並會很感激，如果任何有經驗的人可以指出我在正確的方向。背景圖片在臺式機上很好，但在手機/平板電腦上變形

我在網站上放置的背景圖形在通過桌面查看時很好。

網址：http://test.paigroup.com

當你在網站上去更小的設備上，則背景不坐的權利，並由於某種原因，整個頁面沒有聯繫頁面上正確對齊。

http://test.paigroup.com/contact

我使用爲背景的CSS是：

body{ 
    background: url(../img/site/main-bg1.jpg) no-repeat center 130px; 
    background-size: 100%; 
    z-index: -1; 
    overflow-x: hidden; 

} 

body.microsite{ 
    background: url(../img/site/main-bg1.jpg) no-repeat top; 
    overflow-x: hidden; 
    background-size: 100%; 
    z-index: -1; 
}

在此先感謝:-)

來源

2017-02-24 J.Charnock

只需添加在你的身體標籤在CSS中這兩個線路：

body{ 
display: flex; 
flex-direction: column; 
}

還有不要忘記使用

@media

來源

2017-02-24 12:09:00 Nadim

嗨，我只是嘗試這樣做，它攪亂了一些在其他頁面上的內容和它仍然沒有作出任何背景的差異。：/ –

好吧，嘗試添加'寬度：100％;'但先生我沒有看到任何麻煩，您的網站，你可以提供**屏幕拍攝**您的問題。 – Nadim

我已經嘗試添加，以前沒有運氣。現在看起來好了我已經使用過「background-size：cover;」但我仍然有聯繫頁面上的對齊問題，我不明白爲什麼.. 我已經添加了原始帖子的屏幕截圖。 –

背景圖片在臺式機上很好，但在手機/平板電腦上變形

回答

相關問題