Last Updated: February 25, 2016
·
487
· tacoen

Embedding images into CSS code

You can embedding images into CSS code using Data URI scheme.

php

<?php
function data_uri($file, $mime) {
    $contents = file_get_contents($file);
    $base64 = base64_encode($contents);
    return "data:$mime;base64,$base64";
}
?>

css

.background { background-image: url('data:image/png;base64,<?php echo data_uri('image.png', 'image/png');?>') }

more

http://en.wikipedia.org/wiki/Data_URI_scheme

online generator, if you doesn't php

http://base64fonts.com/
or
http://base64images.com/

1 Response
Add your response

I would also recommend using a CSS pre-compiler such as SASS as this enables you to use very simple syntax such as the following which will create an image embedded into the CSS:

+inlineImage("path-to-image")

Another quick note: be careful not to use too many "inline images" (images embedded into CSS) as it can dramatically increase page load times if the images are considerably large.

over 1 year ago ·