Is there a way to use image data directly in css background?

Question

I've seen how it is possible to embed image data in an img tag (thanks to answer below) but I've been having much difficulty embedding image data as a css background in a div tag.

If I take the same image data and put it in the background-url property, it no longer works.

<style>
#myDiv {
    background-url(image-data);
}
</style>

<div id="myDiv" >

</div>

Here is my test html and css, https://jsfiddle.net/70vc1oLd/.

In Firefox on Mac I do not see any image.

You mean image data base64. You can reference [here](http://stackoverflow.com/questions/1124149/is-embedding-background-image-data-into-css-as-base64-good-or-bad-practice) — dieuhd, Feb 22 '16 at 08:52

Ronen Cypis · Accepted Answer · 2016-02-22T09:27:35.687

3

It is possible although not recommended. You can read about how to embed data uri in css here.

CSS

#myDiv {
  background: url(data:image/gif;base64,IMAGE-DATA-GOES-HERE) no-repeat;
}

Having said that, you should take into account the pros & cons for embedding your image's into the css:

PROS

Less requests to the server.
Images are cached with your CSS code.

CONS

The css files become MUCH bigger, and take much longer to load.
It is harder to maintain, since in your css files you don't even see the image's name, so you need to "remember" which image is embedded in each css property...
Page load takes longer, since the browser waits to finish loading the CSS- what now take a lot longer than without the images.
Images & CSS files requests can't load in parallel since they are in a single request

If you have a low number images, maybe the basic icons of your website, it could be just fine. If you want to use it for high quality images, it will just make your page load waaaaaayyyyy tooooo sloooowwwww...

edited Feb 22 '16 at 09:27

answered Feb 22 '16 at 09:04

Ronen Cypis

21,182
1
20
25

Thanks for the heads up. These are all going to be embedded and run on the client side and used for comparison. So no going over the wire. – 1.21 gigawatts Feb 22 '16 at 09:16
@1.21gigawatts what do you mean by "embedded and run on the client side"? Won't the browser need to load the HTML (and css) for the first time? Is it a mobile app (with all of the resources embedded)? – Ronen Cypis Feb 22 '16 at 09:23
I'm encoding to base 64 and placing a snapshot of the design into the background. The developer will see the design snapshot and the HTML elements on top. It will be an onion skinning technique. I'm passing the whole html page, which is markup, to a internal web control. So no resources are online. All is local. It is a way for a designer to see if their html markup matches their design. It's a desktop app. – 1.21 gigawatts Feb 22 '16 at 09:34
@1.21gigawatts OK it makes sense :-) – Ronen Cypis Feb 22 '16 at 09:46

score 0 · Answer 2 · answered Feb 22 '16 at 09:03

0

Try using this

#myDiv {
  background: url(image-data) no repeat 
}

<div class="myDiv">
  <!-- enter content here -->  
</div>

answered Feb 22 '16 at 09:03

AntonyMN

660
6
18

I just updated the code to not use `background-url`. I posted a link to an online example. – 1.21 gigawatts Feb 22 '16 at 09:04

score 0 · Answer 3 · answered Feb 22 '16 at 09:14

The problem is the line breaks!

I thought the line breaks were part of the encoding!

Here is the original CSS (look how the lines break evenly - it looks correct, right?):

#myDiv {
  width:400px;
  height:200px;
  outline:1px dotted blue;
  background: url("data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==")
repeat-x left center;
}

Here is the updated CSS:

#myDiv {
  width:400px;
  height:200px;
  outline:1px dotted blue;
  background: 
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IAAAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1JREFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jqch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0vr4MkhoXe0rZigAAAABJRU5ErkJggg==)
repeat-x left center;
}

Here it is rendering correctly

Is there a way to use image data directly in css background?

3 Answers3