Multiple Background Images using Sass / Compass

css base64 sencha-touch sass compass-sass
Matrym picture Matrym · May 1, 2011 · Viewed 7.6k times · Source

The following generates a base64 inline-image using sass/compass:

background-image:inline-image("paper.jpg", 'image/jpg');

Is there a way to do multiple background images, or do I have to precompress them myself to do it?

Thanks.

Answer

Beau Smith picture Beau Smith · May 10, 2011

The inline-image function just outputs the url() string, so you can use multiple by doing this:

background: inline-image("front-image.jpg", 'image/jpg') no-repeat, inline-image("back-image.jpg", 'image/jpg') repeat-x

And you'll get the following css:

background: url('data:"image/jpg";base64,FRONTIMAGEDATAHERE') no-repeat, url('data:"image/jpg";base64,BACKIMAGEDATAHERE') repeat-x;

I added "no-repeat" and "repeat-x" otherwise the front-image will repeat and cover the back-image.

Related questions

Is embedding background image data into CSS as Base64 good or bad practice?

I was looking at the source of a greasemonkey userscript and noticed the following in their css: .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) …

Read More
What is the effect of encoding an image in base64?

If I convert an image (jpg or png) to base64, then will it be bigger, or will it have the same size? How much greater will it be? Is it recommended to use base64 encoded images on my website?

Read More
Converting and rendering web fonts to base64 - keep original look

I want to defer font loading on my site inspired by deferred font loading logic for Smashing Magazine. Main part of this is converting fonts to base64 and preparing your CSS file. My steps so far: Pick fonts on Google …

Read More