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
Written by tacoen
Related protips
1 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
·
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Php
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#