1

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

我有非常基本的 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
}

我查看了媒体查询（？），但无法正常工作。

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

4

2 回答 2

2

也许您没有以正确的方式包含媒体查询，这是您的 CSS 示例以及媒体查询，当浏览器窗口宽度为 600 像素或更少时，它会显示背景。

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 （调整浏览器大小以进行测试）

干杯。

于 2014-05-12T11:41:13.717 回答
1

试试这个

@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
}
}
于 2014-05-12T11:37:20.523 回答