Question

I am coding a website and trying to have something like http://www.airbnb.com : I mean a static bar on the top (this part is ok) and a big image just below with a big centered button.

How can I manage to have this big image appearing normally on every screen resolution: for the moment, on 1920*1080px my image is just perfect with the big button centered. But, if i change my resolution, the image will be cropped or resized…

Do you know how can I do that (css or javascript) ?

Thank you so much !

Answer 1

You could use CSS media queries to load a physically different sized image depending on the resolution e.g.

Your original desktop background:

body {
    background:url(images/bg1.jpg) no-repeat 0 0;
}

For screens with a max resolution of 800px:

@media (max-width: 800px) {

    body {
        background:url(images/bg2.jpg) no-repeat 0 0;
    }

}

For screens with a max resolution of 480px:

@media (max-width: 480px) {

    body {
        background:url(images/bg3.jpg) no-repeat 0 0;
    }

}

The resolution you choose are obviously up to yourself and the above are only given as examples.