Play with web technologies

Bulletproof full page background images don't exist

January 05, 2012
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.
Bulletproof full page background images don't exist

They don't and can't exist. Before I continue, let me explain what a 'bulletproof full page background' is. This is a solution that will always give the 'perfect' full page background-image across multiple viewports regardless of which image you are using. Note: I understand 'perfect' is a very subjective term.

I have been asked to create a full page background image before; There was a problem, however...

Images can stretch nicely as long as the proportion remains constant, otherwise the image looks stretched. This is an example of what someone might consider a perfect full page background-image: As you can see, the scale remains constant and this works with the perfect full page background-image.

Problem 1

The background in the previous example contains the width/height of the viewport. If the second viewport didn't have the same dimension ratio, that very same background could look something like this: That is clearly an example of a 'failed' full page background.

Problem 2

A typical and easy way to fix it would be to set the background-image width to be equal to the viewport's width, but leave the height a dynamic size. This would give you something that looks like this: Obviously the problem here is that the entire bottom area of the image is currently not visible... Unless you scroll down, which defeats the purpose of a full-page background-image.

Problem 3

You could very well set the height to fit the viewport's height and have a dynamic width. With this example, the output would now look something like this: This seems like the perfect full page background image solution right? Well... Not really. If we used the exact same technique with an image that has a larger width than it does height, it would look like this:

So, what is the solution?

The perfect solution exists, as long as you don't feel that 'perfect' implies every image should look great with the specific solution. As long as you have background images with similar layouts ( All have width > height or visa versa ) you could use a solution to work with them all.

I have seen a static image used as a centered background image which worked well for that situation.


When it comes to full page background images and dynamic backgrounds, make sure you understand how the dimensions work and pick the right solution for your needs.