Snazzy Striped Backgrounds

By Deane Barker on July 6, 2006

Super Stripes: This is as ingenious as all get-out. Make a background out of a strategically transparent GIF, then set the background color of the BODY (the color behind the repeating GIF background), and the color will show through in the form of subtle stripes, like this.

I love it when people come up with things like this. He even gives you the GIF to use.



  1. I already use this trick to make dashed

    s on my website (dashed with more control than can be acheived with CSS).

    In the same vein, you may be interested in the way Wired‘s main menu GIFs use transparency to change color on mouseover There is a lot that can be done with transparency. :-)

  2. Don’t make the file THAT small! Browsers tend to choke (well, slow down) if the repeating image is too small. With GIF compression you can make the image 10-20 times larger while not increasing filesize dramatically but your browser (any of the big 3) will thank you!

  3. Yeah… I could hear Firefox, IE 6, and Opera gasping for air when I loaded the test page in all of them. These issues were tackled way back before Firefox even debuted on the scene. How do you think they managed fast loading in 1996?

    Either way, this little nifty tutorial showcases one very sought after design ability that a lot of people, like myself, have searched endlessly for in the past.

    Now, how about the tutorial that shows appropriate for creating custom tiles? My biggest mistake with making seamless tiles is that I can never get the dimensions of the image correct in order to seamlessly tile!

Comments are closed. If you have something you really want to say, tweet @gadgetopia.