HTML CSS全屏背景與圖像

Question

我正在使用全屏背景圖片的網站上工作。 並且為了使它適用於所有屏幕類型，我使用的是jquery backstretch插件。

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

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

預覽頁面

如果頁面寬度低於1700像素，您將看到問題。

有沒有辦法解決這個問題而不將文本與背景分開？

Answer 1

你可以使用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; 
    }

}

Answer 2

當媒體查詢屏幕較小時，您可以為文本添加半透明背景

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

將此代碼放在CSS的底部