I recently fixed an issue with my theme design. The dark wood background image that you see on this blog, was not big enough to fit most large monitors, where resolutions are higher than 1080px. Hat tip goes to Daniel Ritchie for pointing it out to me. So, I searched the web and found several possible solutions.
I found Chris Coyier’s at CSS-Tricks solution the most attractive, because it was by far the easiest one to implement. It not only adheres to CSS 3 standards, but it also works across most modern browsers. The result is a background image that fills up the entire page, scales to any size screen when needed, retains its aspect ratio, and centers the image properly.
What more can you ask for? Well, maybe something that loads a tiny bit faster than usual. So, I took the liberty to reduce the file size of my background image from 744kb to 128kb using my beloved Gimp. I use a little bit of image compression, without suffering too much in image quality. So, not only is the background image displaying properly on any size monitor, it also loads much, much faster. That’s a win-win situation.
If you like to know how I implemented a background image that scales to any screen resolution, just head on over to CSS-Tricks and check out Chris Coyier’s CSS3 solution. I hope you’ll find this article very helpful. I tested the new background with a HP w2207h monitor that rotates to landscape mode. Works great. If you find this to be otherwise, any input is appreciated.