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.

Conclusion

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.

Any questions or comments?

  1. Rochelle says:

    What say me is you need to figure out why the free plugin/jquery “supersized” overcomes these perceived issues.

    1. I’m not unsure about what I’m saying, I explain as to why this can’t work any other way.

      The supersized plugin is no exception. I’ve taken a screen shot of the supersized jquery plugin example page – One with my browser maximized, and next to it is my browser minimized to half the height. You’ll notice in the second browser the legs are cut off a bit, therefore it’s not a perfect full screen solution – and as I’ve mentioned above, there is no bullet-proof full screen solution. There is only a solution for your specific need, therefore there is no plug-and-play solution.

  2. Rochelle says:

    I think this works pretty darned well, http://markgamba.com/wordpress/supersized-example/, as opposed to this, http://markgamba.com/wordpress/test-adventure-slideshow-page/ – a paid theme advertised with full screen photo capabilities – and the admin’s explanation for the second example’s portrait shaped image problem points to this page. I’m trying to weed out their lame excuses for charging for something that doesn’t have to work as poorly as it does. lol

    1. Jamy Golden says:

      Hi Rochelle,

      Yeah it does work quite nicely. It’s definitely easy enough to create – So I’d do that instead of paying for something like that :) The “fullscreen” background image confusion comes in when different people expect it to work differently. Both the examples you linked to are ones I’ve used before. I’ve also been asked to have one that doesn’t resize the size on browser resize – So it should only show more/less of the image. All of these options are valid. There is just no *specific* way of doing this to please everyone.

  3. cnwtx says:

    Another option is to use an image that doesn’t look bad stretched. I recently did this with a picture of a flowing American Flag, and since those come in almost any aspect ratio possible, it doesn’t look bad when stretched out of it’s original.

    1. Jamy Golden says:

      That’s a pretty cool work around :p

  4. Blieque says:

    I added a background-image (the image being 3888px wide, wider than 99% of viewports) property to the main body tag, a background-position property set to center and a background-size property set to 100%. This way it’ll scale with the viewport, always fitting by width. By adding a background-attachment rule set at fixed, the background will move down as you scroll, so repeating isn’t necessary.

    -Blieque :)

Leave a Reply to Blieque Cancel reply