javascript - 带图像的 HTML CSS 全屏背景

Question

我在一个使用全屏背景图片的网站上工作。并按顺序为了使其适用于所有屏幕类型，我使用了 jquery backstretch 插件。

我遇到的问题是背景图像上有一些文字，如果屏幕尺寸变小，背景图像和顶部图像会相互叠加。

这很难解释，所以这是实际的页面；

preview page

如果页面宽度低于 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; 
    }

}