Full Scalable Background Images
Recently we (Being Wicked that is) worked on creating the new Fashion for All web site. F4a is a national non-profit in the US. The aim is to offer women living in low-income communities a day of dignified shopping and access to community-based organizations, which provide educational, career, health, wellness, and parenting resources. It’s about providing the tools and resources for women to achieve personal and professional growth. A good cause indeed.
The branding for f4a was done by a very creative group who handed over a PSD for the homepage, along with some minor requirements/requests. The main one, and the one that had me Googling a bit: to have the background photograph expand/shrink with the browser window. I’d seen this done before, but never tried it out myself – always great to have a challenge and learn something new. I Googled and found a few techniques for this – some much better than others.
Until CSS3 is widely accepted by browsers (come on, come on! do you know the great things you can do with CSS3?), we have to look at other options. If CSS3 was an option, this is all we’d need:
body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
Ahh, so neat and compact. But, alas, this is not an option yet. So, we fake it.
There are options, using only CSS, that allow us to set the background image to the full width and height of the page. The problem though is proportions. When you expand the browser horizontally only, or vertically only, the image expands but distorts because it doesn’t expand proportionally. We want to keep the image looking “normal”. After some Googling, I came across this from Kimili.com and it was the best solution I found for what was needed: Flexible Scalable Background Image. Michael gives a detailed tutorial on how to set this up with a working example to reference as well. If you have been thinking about using this technique, this is the tutorial for you.
A passing word of advice: when adding the JavaScript call, keep it in the <body>. I initially placed it in the <head> out of habit and wondered why it wasn’t working.
And we took it a step further by making the background image a custom field in WordPress so that each page can have a specific background image. If nothing is set, then it uses the default homepage image. This also allows the folks at f4a to easily update the background image for each page as they do more events.
<?php if ( $image ): ?>
<style type="text/css">
body { background-image: url(<?php echo $image; ?>);}
</style>
<?php endif; ?>
