Фоновое изображение перемещается и перекрывается на 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');
}