Propaganda Party: The Pop Stalin Design Manifesto

2 Comments | Mar 31 | CSS

A Quick Tip for Large Background Images

I have to admit I didn’t come by this tip by way of my own epiphany but rather from the Nike soccer (football) web site via Smashing Magazine. I’m currently working on a design where the background is one large image. I considered using a jQuery slider script to keep all the content on the same page however I have several issues with using that method, the first and main issue being usability. As designer’s or coder’s, usability should always be the first and last thought for any project.

How I’ve decided to solve one of the issues is to use this bit of code I spied in Nike’s CSS code.

  1. body { background:#fff url(images/your-image-name.jpg) fixed no-repeat;

It’s the fixed part that makes this beautiful and so very smart. The content will scroll but the background stays in place. I love it when a solution to a problem falls into my lap like this. Now I can get rid of the sliding panel JavaScript that I was going to use and just have sections that are linked via an anchor.

 

2 People Have Bloviated

  1. Emily | Apr 5

    I love this, but the only problem is again IE6. It doesn’t seem to support position: fixed. That darn IE6!

  2. Jen | Apr 5

    Well, for most things in IE6 there is a hack that is best put into a separate stylesheet for IE6 crap code.

    Here’s the solution to the problem in IE6 (and keep in mind this really only works with ‘body’ elements):

    1. body { background-image:url(images/your-image-name.jpg)
    2. background-attachment: fixed;
    3. background-repeat: no-repeat;