Banner - responsive design

HTML & CSS
1

I am just trying to get my head around responsive design.

I have made a banner for my website which is 2000px across. I want to use it for all except a phone website size page.

The design should work (design wise) - it will look ok if its a 1900px screen, 1200px screen and 800 px screen.

What I want to do is effectively crop the image to the size of the browser width. This is because if its a 1400 px screen then I don’t want people to be able to scroll horizontally where there is no content.

Is there a way of doing this?

2

Yes, that is possible.
If you want to support also older Internet Explorers, you can put a 100% width wrapper around the image, without giving the image size in the html-code *):

<div id="bannerWrapper":
    <img src="images/banner.jpg" alt="" />
</div>

And then in the css:

#bannerWrapper img {
    width: 100%;
    }

Now the banner image will follow the width of his parent element, the #bannerWrapper, while the #bannerWrapper is following the screen width (as div/block element: automatically).
And if you don’t give a height value for the image, the height of the banner image will follow the width: proportionally in respect to the computed value of the img-width.
So there is also no need to give the #bannerWrapper a height: the wrapper will adapt himself automatically. :slight_smile:

*) Note: this can only be done (cross-browser) with a foreground image (in the html), not with a background-image.
If you use the banner as background-image, it could be done with the css3 property "[U]background-size[/U]", but then you loose support for IE before IE9 (see: [URL=“http://caniuse.com/#search=background-size”][U]caniuse.com/#search=background-size[/U])

3

The benefit of using a background image though is that you can hide (or change) it for mobile unlike html images which always get loaded even if they are display:none.

4

That’s true for css media queries.
For a foreground image you could use a javascript workaround:

<div id="bannerWrapper">
    <!-- empty, or a noscript variant of the image (with noscript-tags around it can be styled different, if desired) -->
</div>

var screenWidth=document.getElementsByTagName('html')[0].offsetWidth;
var bannerWrapper=document.getElementById('bannerWrapper');

if (screenWidth<420){
    bannerWrapper.innerHTML='<img src="images/banner-mobile.jpg" alt="" />';
}
else {
    bannerWrapper.innerHTML='<img src="images/banner-desktop.jpg" alt="" />';
}

… or something like that. Then only one of the images will be loaded: for the mobiles the big size banner can stay in the cloud.

In the same way you could serve different sized images for screen widths of 800px, 1024px, 1280px, and 1900+px.
As the image size is growing quadratically (image of 2x width = 4x more pixels, while also the height is 2x more), this can save download time for the intermediate screen sizes:

if (screenWidth<420){
    bannerWrapper.innerHTML='<img src="images/banner-mobile.jpg" alt="" />';
}
else if (screenWidth<=800){
    bannerWrapper.innerHTML='<img src="images/banner-800.jpg" alt="" />';
}
else if (screenWidth<=1024){
    bannerWrapper.innerHTML='<img src="images/banner-1024.jpg" alt="" />';
}
...
else {
    bannerWrapper.innerHTML='<img src="images/banner-1900.jpg" alt="" />';
}
5

I set the banner image as a background image which stopped the scrolling with scroll 0. This was my final version. I overlaid a smaller banner which is centred