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

【问题标题】：Trying to get bg image to disappear when screen is smaller?当屏幕较小时，试图让 bg 图像消失？
【发布时间】：2014-06-29 17:45:48
【问题描述】：

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

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

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

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

【问题讨论】：

你能提供一个jsfiddle吗？ jsfiddle.net

标签： html css image background bigcartel

【解决方案1】：

也许您没有以正确的方式包含媒体查询，这是您的 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（调整浏览器大小以进行测试）

干杯。

【讨论】：

干杯老兄！工作一种享受。如果您想要一件 T 恤，请告诉我，我会寄给您一个以表示感谢！

【解决方案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
}
}

【讨论】：