CSS performance: is it okay to make significant use of an overlaid pattern on coloured elements?

Question

I'm about to build a design which involves quite a lot of textured backgrounds which use the same parchment pattern but in different colours. Obviously I could create and export a different tiled background image for each colour, but I'm wondering whether it might be cleverer to create a single monochrome pattern which I can overlay elements which have the necessary block background colour.

My question is whether this approach would be okay from a performance point of view. I've done this before for small elements, but I'm wondering whether it would be unacceptably slow to use this technique across many elements, for example the site's background, several divs on a given page, buttons etc. Experience tells me that older browsers choke a bit on too much png alpha (although this project is IE8+, mercifully).

Any thoughts?

EDIT: when I talk of performance my main concern isn't download time but actual page rendering performance. I've noticed alpha PNGs lagging some browsers in the past, so extensive use of even a small tiled texture might (I surmise) cause similar problems.

Download performance isn't an issue at this stage.

Answer 1

Performance of what? If performance of loading, then using fewer files will speed things up. If performance of scrolling, that will depend on how you build it and your target audience.

I built a site years ago which had a US audience and used a monochromatic transparent PNG which overlaid a solid color. I tested this on quite a few machines. The only display performance issues were if something was scrolling over the top of something else that wasn't. For example, if you have two patterns overlaid and one scrolls but the other does, you're going to see some redraw issues on slower machines and mobile devices.

This was only for a handful of elements, including the page background. If you're applying it on dozens of elements per page, that might start showing issues on older machines. But it will still be less resource intensive than, for example, a large JS slider with transitions.