Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

24 ways

Posted on 03 December 2007 12 comments

Article illustration for 24 ways

On 1st December, Drew launched this year’s 24 Ways, the web industry’s annual ‘advent calendar’ of tips and tricks, and I’m pleased to announce that my article for the site has gone up today! Entitled “The Neverending (Background Image) Story”, it’s a quick run-down of how to create a seamlessly repeating background, reduced to 5 simple steps that you can apply to pretty much any image you use.

The premise behind the 24 Ways is a simple one: to give away a web design tip for every day of December up until Christmas Eve. It’s a kind of mini A List Apart except that you get a present every day. It’s a shame Zeldman isn’t Santa, though – I think he’d make a jolly good one.

My article will sit alongside tips, tricks and musings from some of the web’s finest designers and a whole bunch of my heroes, so I’m extremely proud to be a part of this excellent publication. ’’The Neverending (Background Image) Story" is on 24 ways from today, so go and check it out… and let me know what you think!


  1. Luke


    03 December 2007 @ 02:46PM #

    Ah, so that’s what that site was! Pretty nifty article mate, I’m sending across to my company’s designer as we speak. Nice one :)

  2. cvander


    03 December 2007 @ 04:28PM #

    Great article and thanks for the remainer of 24ways.. The perfect christmas gift.

  3. Natha


    03 December 2007 @ 05:34PM #

    Oh thanks so much for this link! Your tutorial was cool. I will have to keep looking through it!



  4. Rodrigo


    03 December 2007 @ 09:10PM #

    Congrats Elliot!

  5. Dominik Lenk

    Dominik Lenk

    04 December 2007 @ 12:05AM #

    Thanks for reminding me about 24ways. I followed it last year, but forgot about it again. Nice article too.

  6. Elliot Jay Stocks

    Elliot Jay Stocks

    04 December 2007 @ 12:36AM #

    Thanks guys! I’m glad you enjoyed the article. There are loads of great authors coming up on 24 Ways, so make sure you keep your eyes on the site!

  7. Chris Coyier

    Chris Coyier

    04 December 2007 @ 02:00AM #

    Darn nice work there Elliot. =)

    I think it might have been cool to use that “one-pixel wide” image as an x-repeated image on the body element and then your image overlayed on that. Would have been a similar effect without repeating the graphic on super-huge monitors. Just an idea.

  8. Matt


    05 December 2007 @ 07:35AM #

    Nice article there Elliot..

    Love the ‘advent calendar’ too, though it’s not quite as tasty as the chocolate one we bought the other night..hehe..

  9. Bruce Bowden

    Bruce Bowden

    07 December 2007 @ 05:55AM #

    Elliot, I’d add one technique to your excellent description: the offset filter (found under Other). Choose a horizontal offset of about half the picture width, select ‘wrap around’ and presto! The ‘join’ is now in the middle of your image. You can now apply all the effects you describe, including the clouds, directly on that part of the image. As long as you never ‘touch’ the new edges, you will get perfect repeatable images.

  10. Zinni


    16 December 2007 @ 07:48AM #

    I can’t believe that I had never come across this page in the past. I was looking back through the past years and there are still some great tips and tricks listed. Thanks for the great article Elliot, you never cease to impress.

  11. Elliot Jay Stocks

    Elliot Jay Stocks

    19 December 2007 @ 01:33AM #

    Thanks for your comments, guys! I’m glad you enjoyed the article. There have been some great ones since by the likes of Andy Clarke, Dave Shea, Simon Willison, Mark Boulton, Paul Boag, Natalie Downe, Ethan Marcotte, Mark Norman Francis, and Richard Rutter (to name but a few), so I hope you’ve been visiting the site regularly. If not, go there now!

    @ Chris Coyier: That’s a possibility I considered, but most of the time gradients like that look pretty bad; the blends between the pixels are just too obvious. It’s worth considering on other occasions, though, as it’s completely dependent on what colours or imagery you’re working with.

    @ Bruce Bowden: Thanks for the tip! I’ve never actually used the offset filter before so I’ll have to experiement.

  12. Jonathan


    12 February 2008 @ 11:39PM #

    Hi there,

    Very nice site, I was wondering how you got the background image to remain in the same position and have the site scroll instead, is it a secret or something you can share.

    Nice Job.

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.