One of the easiest and most effective ways of speeding up a web site is to replace background images with CSS3. Currently I’m exploring, and trying to have a very good understanding off, all the ways we can use CSS3 to create layouts instead of resorting to using images that create http requests and slow down pages, especially on mobile devices.
The site I happen to be working on has three different backgrounds with vertical stripes. Figuring out how to replace the images it currently uses with CSS is a big win, provided that the size of the CSS required to create these backgrounds is not prohibitively large. (Background images tile and can be very small files — it’s the http request for the image that is more expensive in terms of performance.) In the case of stripes, the CSS is small.
So how do we make striped backgrounds with CSS? The place I looked for and found the answer is Lea Verou’s CSS3 Patterns Gallery. This gallery blows my mind with the possibilities of how to use CSS3 gradients to make backgrounds. What I’m doing in this example is relatively very easy; the gallery includes plaid, hearts, checkerboards and many other cool patterns.
As far as I can tell, there is no easy way to copy the cross-browser CSS from the gallery. Therefore I’ll provide it here, and show you how to take thick gray lines and create other colors and widths.
Here’s Lea’s vertical stripes background and the code to create it:
.verticalStripes {
background-color: gray;
background-size: 50px;
background-image: -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
background-image: -moz-linear-gradient(0px 50%, transparent 50%, rgba(255, 255, 255, 0.5) 50%);
background-image: -ms-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
background-image: -o-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .5) 50%);
}
The backgrounds I need to re-create are blueish with very thin, subtle lines. Here’s a screenshot of one of the replaced backgrounds with the code.
.verticalStripes {
background-color: #99d0d4;
background-size: 10px;
background-image: -webkit-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
background-image: -moz-linear-gradient(0px 50%, transparent 90%, rgba(255, 255, 255, 0.25) 50%);
background-image: -ms-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
background-image: -o-linear-gradient(0, transparent 90%, rgba(255, 255, 255, .25) 50%);
}
It’s easy to take these examples and create variations. Here we are taking one color, and putting a transparent sheet of another color on top, shifted X percent. In the blue stripes example, the total width of the repeating background is 10px and the part of it that is overlapped with transparent white is 10% or 1px. We could replace 90% with 9px if we wish, but using a percentage here may be more maintainable.
What if we want two different colors, not a color and a shade of the same color? We can just take our transparent sheet and put another color, not white, on top of it. Here I’ll make red and purple stripes using red as a base color and blue as the overlay.
.verticalStripes {
background-color: #ff3300;
background-size: 50px;
background-image: -webkit-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);
background-image: -moz-linear-gradient(0px 50%, transparent 50%, rgba(0, 0, 255, 0.5) 50%);
background-image: -ms-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);
background-image: -o-linear-gradient(0, transparent 50%, rgba(0, 0, 255, .5) 50%);
}
Easy!
As you can see this is very flexible. I’d challenge you to find a striped background that can’t be replaced with CSS. If you want red and green stripes, you might need to find another solution, like a background image. But if you want red and green stripes — the idea alone gives me a headache — you could be deliberately punishing your user anyway, and you might further torture them with a slow page.
File under: big wins.
What would your grandmother be? (hint: “behind”)