turning an image into css

Question

I have this image (attached). I am not a designer but I do not want to use the image in my app. I heard you can come very close to an image using css. Can someone help me wi

Answer 1

With "I don't want to use an image in my app" being a rather vague requirement, you may find data URIs an appropriate alternative:

.xyz{
  background:url(data:image/png;base64,/*encoded image*/);
}

I'm a big fan of using these sparingly - they remove the need of an additional http request if the image is external, they do not require as much rendering resources on the client as heavy sprites would and they are (except for most trivial cases with the graphics simpler than yours) faster to render than CSS3 effects.

Edit: base64 encoding is part of some LESS/SASS css pre-processing implementations and there are online encoders available for one-off usage, for instance this one (just remember to remove all line breaks from the data uri)

Fiddled