dcsimg

What is your dream?

What do you do?

That's right: You

This is about you, your goals, your passions.

Figure that out and we'll help you take it to the world, shouting it from the rooftops. We create the websites that enable you to achieve this dream.

Making Repeatable Background Stripes

Tuesday, February 14, 2012 10:26 PM

Last week I was looking for a way to create a background of alternating colored stripes for an entire web page or element. I needed to be able to easily change the colors so I wanted to do it with CSS and not images, but without adding a bunch of extra DIVs (which wouldn’t have worked anyway). I looked into gradients, but without knowing how tall the display area was, that wouldn’t work either. Plus, a gradient of that size would be hugely resource intensive. That’s when I remembered SVG.

SVG is a graphic made out of XML style code. I won’t go into a full blown tutorial, as I’m not familiar enough with SVG and I’m sure there are many fantastic resources out there if you just Google. Basically, what I was able to do was to create, using XML-based SVG code, an image that is 1 pixel wide by 100 pixels tall. The top 50 pixels are one color, the bottom, another. Here’s an example of the code:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="50" width="100" y="0" x="0" fill="#FF0000"/>
  <rect fill="#00FF00" x="0" y="50" width="100" height="50" id="svg_2"/>
 </g>
</svg>

(Note the comment in there, I used that editor to generate the code. It looks like a great learning tool! Check it out.)

Here’s a live version of that code.


 
 
  Layer 1
  
  
 

This is what you should see if your browser can display SVG.
SVG example

Shush. Don’t judge my color choices.

Now, since that’s just code it’s really easy to swap out of the colors depending on your needs. Especially with a little bit of PHP in there. I grab my colors out of a database, but they could just as easily be in an array. For example:

<?php
header("Content-type: image/svg+xml");
$colors = array('#ff0000', '#00ff00');
?>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <rect id="svg_1" height="50" width="100" y="0" x="0" fill="<?php echo $colors[0] ?>"/>
  <rect fill="<?php echo $colors[1] ?>" x="0" y="50" width="100" height="50" id="svg_2"/>
 </g>
</svg>

Save that as a .php file and you’re good to go. It’s important to notice the content-type being set by the header() function. This makes sure the browser treats the output as SVG.

Lastly, in my CSS file I simply set the above PHP file as the source for my background: url().

.stripes {
    background: url(your-php-generated-svg.php);
}

That will repeat across the x- and y-axes. You could also use background-size to change the size since it’s a scalable vector.

Don’t forget to know when you can use it!

Update 22-Feb-2012:
I just stumbled across this CSS declaration today: repeating-linear-gradient Looks like that might be problem solved!

Comments

Commenting is not available in this channel entry.

Sorry, for spam reasons I've had to remove the contact form. Why don't you hit me up on Twitter instead?