In this recipe, you will set the background images for HTML elements with data URIs. Data URIs don't link to images, creating extra HTTP requests, but write down their content into the CSS file.
For this recipe, you can use the command-line lessc
or the client-side less.js
compiler, as described in Chapter 1, Getting to Grips with the Basics of Less. You will also need a Less file, which can be edited with your favorite text editor. Finally, you will need an example image, for instance, a PNG file named image.png
.
Create a
project.less
file in the same directory as yourimage.png
file and write the following Less code into it:div { background-image: data-uri('image.png'); }
Now compile the Less code into CSS code using the following command:
lessc project.less
Finally, you will find the compiled CSS will look like the following code:
div { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUh="); }