Several years back we created a new website for The Mercy House. The old website was outdated and sorely lacking meaningful information. As a mission oriented church located in Anderson, Ind. they needed an updated website to keep in touch with church members and the surrounding community. We created an informative website using Drupal, which was the best free content management system (CMS) at the time. Looking back on the website now, it is very drab; but at the time is was rather indicative of the mood of a small, young church struggling to get by.
After a while, as leadership changed, it became more difficult to keep the website updated. It was no longer meeting the needs of The Mercy House and no longer reflected the overall mood of the community. It was time for an update.
When speaking with the pastor about what he wanted there were two main ideas. It needed to be easier to use and update than the current website; and it should have, “Lots of large background images.” The former problem was easy; we rebuilt the site using the up-and-coming WordPress CMS. The latter desire (large background images) was more difficult. When using large background images a designer runs up against a couple different problems. The first is size, if an image is too large it slows down the loading of a website and annoys the visitors. The second problem is that of window resizing. If your image is a fixed size and a visitor opens his browser window to a larger size what does he see? Does he see the image repeat itself? Does he get a stark line where the picture ends?
How do I make it look like a gigantic image while keeping the file-size reasonably small? This is why I love being a designer. It was a tricky problem but as seen below, I finally came up with a solution. The background image is technically the size of an average browser window, however about three-fifths of the image is actually just white. Lots of white reduces the size of the image significantly. It also solves the window-resizing problem. Since the right and bottom edges are solid white all we need is white for an extended background.
