Friday, July 05, 2013

How To: Use base64 in your CSS for background images

Following on from my post about using D3 to generate graphs. I've recently been evaluating Highcharts for use in a rather large project that I have been working on since last year. So far I've been impressed with the library but that's another topic. What I want to write about is something I've been playing with recently; embedding images into a CSS file using base64.

The reason I came across this is due to accessibility. On producing some pie charts in our app the client mentioned the fact that the colours being used may prevent some their users from seeing the sections of the chart. After some searching and a post on stackoverflow, I was pointed in the direction of a pattern fill plugin which would solve our issue. The example I had seen used a standard image file but I was keen to create some SVG patterns inspired by the pages on philbit and lea.verou.me.

Using the example SVG patterns and editing them on Codepen, I gathered a few base64 values which can be used in the following format:
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…R0aD0iOTkiIGhlaWdodD0iMjUiIGZpbGw9IiNhOWNlMDAiPjwvcmVjdD4KPC9nPgo8L3N2Zz4=);
The result of using the base64 values of the SVG images as backgrounds within Highcharts is shown below. There is also a jsfiddle if you want to see how it works.