Full Scalable Background Images

Screenshot: Fashion for All

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; ?>

4 Comments

  • Rachel
    October 15, 2009 at 11:39 am  - Reply

    When you linked to this on Twitter, I didn’t put two and two together. I think you guys did an amazing job on the site.

  • Lorissa
    October 15, 2009 at 2:22 pm  - Reply

    Thanks so much! 🙂

  • Jack
    April 22, 2010 at 2:49 pm  - Reply

    I love this idea, but I can’t figure out where to place the .js script within WordPress’ Thematic theme. Any suggestions?
    Thanks!
    J

  • Lorissa
    April 22, 2010 at 2:58 pm  - Reply

    Hi Jack,

    I tend to always create a js folder within the theme directory for any JS files and I’d recommend this approach just to keep things nicely organised. Create a new folder called “js” in your theme directory. Then, within the header.php for your theme, add this just below the <body> tag, or in the case of the Thematic theme, <body class="<?php thematic_body_class() ?>">:


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/flexibg.js" type="text/javascript" charset="utf-8"></script>

    That should do it! I hope this helps. I do wonder if some of the PHP used by that specific theme will cause some hiccups, so let me know if it does.

Leave a Reply