HTML CSS帶圖像的全屏幕背景

我正在使用全屏背景圖像的網站上工作。爲了使它在所有屏幕類型上工作，我正在使用jquery backstretch插件。HTML CSS帶圖像的全屏幕背景

我遇到的問題是背景圖像上有一些文字，如果屏幕尺寸變小，背景上的圖像和頂部的圖像相互重疊。

這是很難解釋所以這裏是實際的頁面;

preview page

如果頁面的寬度下降低於1700個像素，你會看到這個問題。

有沒有辦法解決這個問題，沒有從背景分離文本？

來源

2013-08-26 user1778459

背景工作正常。唯一的問題是選擇背景與你的內容衝突。 – Vector

是的，我知道，但有沒有其他方法可以解決此問題。 – user1778459

爲小屏幕尺寸使用不同的背景？ – andi

您可以使用background-size：cover;

{ 
     background: url(http://alicantest.info/public/_images/anasayfa_bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
}

或使用媒體查詢的其他圖像

@media screen and (max-width: 1700px) { 

    { 
      background: url(newImage.jpg) no-repeat center center fixed; 
    } 

}

來源

2013-08-26 15:00:42

背景本身工作正常。請看這個例子。問題在於它與其上的內容衝突。我問的是，還有沒有其他方法可以解決這個問題。 – user1778459

你可以添加一個半透明背景的文本時屏幕與媒體查詢

@media screen and (max-width: 795px){ 
    #map_text { 
     background: rgba(0,0,0,0.7); 
    } 
}

戴上小此代碼位於您的CSS底部

來源

2013-08-26 15:11:11 Vector

HTML CSS帶圖像的全屏幕背景

回答

相關問題