2014-10-10 60 views
1

我編碼的網頁和學習flexbox。我來到了一個很好的設計,一切都在桌面上完美運行(當窗口調整一切都是完美的時候)。這些元素還可以在手機和平​​板電腦上非常好地調整大小。背景圖像不顯示在鉻移動

我唯一的問題是,主要的大分裂有一個背景圖像,除了在移動(android)的鉻,Safari瀏覽器,甚至沒有出現在肖像模式,並且全部被炸燬在景觀。它雖然(Android)的firefox應用程序按預期工作。

這裏是網址:http://liferockets.com/bluemonk/

這裏是GitHub的分支的所有代碼:https://github.com/soulhima/bluemonk/tree/main-edits

和這裏的,是專門處理頁面的那部分代碼: 的Html

<div class="start-box-1"> 
     <p class="start-text">I Want A : 
      <select> 
       <option value="choice1">Choice 1</option> 
       <option value="choice2">Choice 2</option> 
      </select> 
      <span class="start-button">Website</span> 
     </p> 
    </div> 


    <div class="start-box-2"> 
     <p class="start-text">I Want A 
     <span class="start-button">Design</span></p> 
    </div> 
</div> 

CSS

background-image: url(../images/start-box.jpg); 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center center; 

感謝您的幫助。

回答

0
xxx { 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
height:100%; 
min-height:100%; 
} 
+0

一些解釋會有幫助。 – showdev 2015-05-05 16:41:03

+0

他的代碼使用供應商特定的前綴 - http://www.sitepoint.com/web-foundations/vendor-specific-properties/ – brezanac 2015-05-05 16:44:31