背景图像在 iphone 和移动设备上移动并重叠，需要解决方法

Question

我有一个包装器 div，它包装了我的页面标题，如下所示：

<div id="wrapper">
  <div id="centered_slideshow">
     // Slideshow here, covering approx 75% of screen width...
  </div>
</div>

#wrapper{
    width:100%;
    min-width:980px;
    background:#000 url(../graphics/header_wrapper_bgr_left.jpg) no-repeat bottom left;
}
#centered_slideshow{
        margin:0 auto; //for centering the div inside the wrapper
}

现在整个网站在移动设备上看起来都很棒，除了这张背景图片。 移动设备具有明显更小的宽度。这会导致背景图像“移动”到移动屏幕的左下方，并且由于幻灯片位于屏幕中间，因此它与幻灯片部分重叠。即背景图像与幻灯片重叠，这是我的问题。

如何使图像不显示在移动设备中，当屏幕宽度变小时（如在移动设备中）使背景图像完全不移动？

如果您需要更多信息，请告诉我。

Answer 1

您可以使用媒体查询来检查屏幕尺寸，然后为移动设备提供不同的背景。所以像

@media screen and (max-width: 480px) {
    #wrapper{
        width:100%;
        background-image:none;
    }
}

更多关于媒体查询的信息：http://www.w3.org/TR/css3-mediaqueries/

您也可以使用 jQuery 来执行此操作，但我建议您仅在您已经在网站上使用 jQuery 时才这样做。 （最好不要让用户下载过多的脚本。）在这种情况下，

if (screen.width<480){
    $('#wrapper').css('background-image','none');
}