Question

I have a wrapper div which wraps the header of my page like below:

<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
}

Now the entire website looks great in mobile devices, except for this one background image.
The mobile device has a significantly smaller width. This results in the background image beeing “moved” into the bottom left of the mobile screen, and since the slideshow is in the middle of the screen it partly overlaps the slideshow. ie the background image overlaps the slideshow, which is my problem.

How can I make the image not beeing shown in mobile devices, alt making the background image not move at all when the screen width gets smaller (as in mobile devices)?

If you need more input let me know.

Answer 1

You could use a media query to check the screen size and then serve the mobile device with a different background. So something like

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

More on media queries here: http://www.w3.org/TR/css3-mediaqueries/

You could also use jQuery to do this, but I would advise this only if you are already using jQuery for the site. (Best not to overload the user with too many script downloads.) In this case,

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