圖像不適合屏幕

在我的紅寶石軌道Web應用程序中，我有一個圖像由兩種顏色組成，第一部分是黑色，第二部分是藍色。當我在背景上設置該圖像中，圖像被重複：圖像不適合屏幕

body { 
    background:url("bg.png"); 
}

但是當我使用的圖像的repeatation如下除去：

body { 
    background:url("bg.png") 0 0 repeat-x; 
}

但垂直其不適合在屏幕上，

enter image description here

它覆蓋在屏幕的2 /第三部分。黑色部分是合適的，但藍色部分不覆蓋剩餘的屏幕，我想只增加圖像的藍色部分不是黑色，這是可能的。

請告訴我，等待您的回覆。謝謝。

來源

2014-06-19 user88

您無法在單個元素上重複一半的圖像。 – Amadan

然後我會怎樣解決這個問題。 – user88

有什麼方法可以在圖像的藍色部分重複。 – user88

不同元素

使用背景圖像是一門藝術

我建議使用兩個元素 - 一個「NAV」元素&然後設置body的背景的藍色漸變。您可以使用background-size: cover屬性，使這項工作：

http://jsfiddle.net/wM2B7/

#app/assets/stylesheets/application.css.scss 
body { 
    background: url("gradient.png"); 
    background-size: cover; 
} 

nav { 
    height: 45px; 
    display: block; 
    background: url("black.png") 0 0 repeat-x; 
}

這將允許你給具有單一背景圖像的錯覺，同時保持具有多個元素的IE的body的靈活性（造型將代表正文，nav造型將代表nav）

來源

2014-06-19 07:11:33

可以將CSS3漸變與背景圖像一起使用。有關詳細信息，請參閱此Q&A。

創建一個只是黑色部分的背景圖像，然後使用CSS漸變創建藍色部分。

來源

2014-06-19 06:40:09 RaneWrites

圖像不適合屏幕

回答

相關問題