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带图像的全屏幕背景

回答

相关问题