0HTML5 LogoResponsive background images for websites

I’ve recently been updating my websites and web server and adding a new site (LoveCrete.org). I wanted to have a background image on LoveCrete and realised that of course 1 size doesn’t fit all screens. Here is a summary of what my thinking was and what I did to cater for the numerous screen sizes and orientations.

Which orientation

I started by making myself a little table of all the common resolutions used on PCs and tablets (in horizontal orientation). I decided to focus on this because most images are available in landscape so this is a sensible place to start.

I decided that I would place images centrally on the page and let the edges be lost off the edge of the screen in some instances. When a phone is used in portrait orientation it will load the image based on height (not width) and will lose a lot from both edge of the image. Doing it any other way would mean needing images cropped to a totally different shape or having a landscape image “tile” on a tall screen, which is not desirable.

The ratios of the maximum size image to make in each group were all around 1.6 with a few a bit higher. To keep things simpler I decided to use a ratio of 16:10 for all images and came up with sizes to make accordingly.

This means in most cases the image will not be a perfect fit to the screen size, but all screens will get something very close and no screen will end up with something too small. It also means a source image can be cropped to 16:10 once and then multiple sizes easily created

Common landscape resolution groups

HeightWidthImage to makeComments
4:316:1016:9
2160288038402400×38404k UHD
1600
1536
1440

2048
1920
2560



2560
1600×2560
1200
1080
1050
1600
1440
1400
1920

1680

1920
1200×1920Full HD 1080p
960
900
1280
1200
1536
1440

1600
1000×1600
800
768
720

1024
960
1280



1280
800×1280720p
600
576
800
768
960

1024
640×1024
480640768480×768

As you can see I have grouped quite a few resolutions and will then make 1 image that will cover all heights up to the largest height in that group. I will make sure the image is also wide enough for the maximum width such a height might be paired with on a normal screen. I haven’t taken account of unusual configurations like 21:9 monitors or multiple screens – there has to be a limit somewhere!

Because CSS uses the viewport or browser size and not the screen size landscape screens need to use width rather than height – as on most systems the top and bottom lose space to title bars etc whilst the width is usually maximised. However, for portrait displays it is better to use the height property. This can be done as CSS can identify the screen orientation

The CSS used then looks as follows

body{background-repeat: no-repeat; background-attachment: fixed; background-position: center center; background-size: cover;}

@media (max-width: 768px) {body { background-image: url(bg480.jpg); }}
@media (min-width:769px) and (max-width: 1024px) {body { background-image: url(bg640.jpg); }}
@media (min-width:1025px) and (max-width: 1280px) {body { background-image: url(bg800.jpg); }}
@media (min-width:1281px) and (max-width: 1600px) {body { background-image: url(bg1000.jpg); }}
@media (min-width:1601px) and (max-width: 1920px) {body { background-image: url(bg1200.jpg); }}
@media (min-width:1921px) and (max-width: 2560px) {body { background-image: url(bg1600.jpg); }}
@media (min-width:2561px) {body { background-image: url(../images/bg2400.jpg); }}

@media (orientation: portrait){
@media (max-height: 480px) {body { background-image: url(bg480.jpg); }}
@media (min-height:481px) and (max-height: 640px) {body { background-image: url(bg640.jpg); }}
@media (min-height:641px) and (max-height: 800px) {body { background-image: url(bg800.jpg); }}
@media (min-height:801px) and (max-height: 1000px) {body { background-image: url(bg1000.jpg); }}
@media (min-height:1001px) and (max-height: 1200px) {body { background-image: url(bg1200.jpg); }}
@media (min-height:1201px) and (max-height: 1600px) {body { background-image: url(bg1600.jpg); }}
@media (min-height:1601px) {body { background-image: url(bg2400.jpg); }}
}

What do you think? Drop us a comment below! If you would like to subscribe please use the subscribe link on the menu at the top right. You can also share this with your friends by using the social links below. Cheers.

Leave a Reply