Question

我试图让我的背景图像消失，因为屏幕尺寸/分辨率会变小，因为它会使一切都太忙。

我有非常基本的html技能，基本上没有CSS知识。

可能使事情复杂化的是大型卡特尔略有修改。目前我已将此代码用于我的背景：

body {
  background-repeat: no-repeat ;
  background-image: url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sidework copyR.png"), url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sideworkL.png");
  background-attachment: fixed;
  background-position: left, right
}

我查看了媒体查询（？），但无法让它发挥作用。

我想要任何可能的帮助。我假设您可能需要查看更多我很乐意为您提供的代码。我也可以为你找一个免费的发球台！

Answer 1

也许你没有以正确的方式包含媒体查询，下面是一个CSS示例以及一个媒体查询，当浏览器窗口宽度为600px或更小时，背景就会消失。

body {
  background-repeat: no-repeat ;
  background-image: url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sidework copyR.png"), url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sideworkL.png");
  background-attachment: fixed;
  background-position: left, right
}
/**
 * Remove background if window width is 6OOpx or less 
 */
@media all and ( max-width: 600px ) {
  body {
    background: none;
  }
}

工作示例：http://codepen.io/anon/pen/sfLmo（调整浏览器大小以进行测试）

干杯。

Answer 2

试试这个

@media only screen  and (max-device-width :700px) {
  body{
    background:none;
  }
}
@media only screen  and (min-device-width: 701px) {
   body {
  background-repeat: no-repeat ;
  background-image: url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sidework copyR.png"), url("http://dl.dropbox.com/u/19831829/Sour%20Milk%20Website/sideworkL.png");
  background-attachment: fixed;
  background-position: left, right
}
}

当屏幕较小时，试图让bg图像消失？

2 个答案: