爲手機優化背景圖片？

Question

所以，我有一個gif運行，佔用整個屏幕，作爲背景。但是，當我在手機上查看該網站時，整個屏幕沒有被填滿，一半下來就是黑色。 http://goroam.org這裏是鏈接，我將如何讓手機將它放在GIF佔據整個屏幕的地方，而文本處於中間，就像我從筆記本電腦查看網站一樣？

Answer 1

這裏是您的解決方案..

製作背景尺寸：100％100％;將圖像充分篩選

而且使H1響應屏幕，以便它自動調整屏幕..

這裏是代碼：

html { 
    height: 100%; 
} 

body { 
    color: #EEEEEE; 
    font: 24px/1.3 "arial"; 
    min-height: 100%; 
    background: url("http://media.giphy.com/media/13bGgH9VnEDsuA/giphy.gif") no-repeat scroll 0 0/100% 100% #000000; 
    height: auto; 
    margin: 0; 
    width: 100%; 
} 

h1 { 
    color: #F0F0F0; 
    font-family: "belta bold"; 
    font-size: 212px; 
    left: 0; 
    margin: -120px 0 0; 
    position: absolute; 
    text-align: center; 
    top: 50%; 
    width: 100%; 
} 

如果你想完美的解決方案使用CSS媒體查詢..

這裏是小提琴http://jsfiddle.net/krunalp1993/53zaT/

使用媒體查詢

@media screen and (max-width:1024px){ 
    h1{ 
    font-size:62px; 
    margin-top:-31px; 
} 
} 

下面是小提琴使用媒體查詢http://jsfiddle.net/krunalp1993/53zaT/2/

希望這hepls你:)