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.
This is what you should see if your browser can display SVG.
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