Question

I have a ‘selected’ class, and I’ve defined an embedded background image along with a webkit gradient. It works on safari on my iPod touch running iOS 5.0.1, but neither the image or the gradient shows on my iPad running iOS 4.3.4. Any tips on making this more compatible?

.selected {
  background:url(data:image/png;base64,blablablabl==) 14px center no-repeat, -webkit-linear-gradient(bottom, red 0%, blue 100%);
}

Note that the image displays correctly everywhere when I don’t include the gradient.

Answer 1

I worked around this by using the CSS before attribute: http://www.htmldog.com/reference/cssproperties/content/

.selected::before { content: url(data:image/png;base64,blablablabl==); }