背景图像在 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');
}