Question

in my webapp for iPhone/Android/BB6 I try to put all the images into image array (something like here http://goo.gl/VcMcj), in order to optimize loading times.

In most cases it works fine with background-position/width/height-properties.
Now I would like to put my -webkit-border-image’s into image array, but can’t figure out how.

It that possible?

Thnaks in advance!

Answer 1

I combined and tweaked the first two buttons into one image:

Live Demo

#leftnav a:first-child {
    /* 0 5 0 13 */
    -webkit-border-image: url(https://i.stack.imgur.com/Iz5Jl.png) 0 5 30 13
}

#leftbutton a,#rightbutton a,#imbutton a {
    /* 0 5 0 5 */
    -webkit-border-image: url(https://i.stack.imgur.com/Iz5Jl.png) 30 5 0 5
}

Possibly not worth the hassle for the minuscule file sizes and number of images involved here.

---

While I was looking at this, I found a site which made testing so much easier:

http://border-image.com

---

I couldn’t get the textbox border working with, so I left that one alone:

This is the image I made and was trying with before I gave up, if it helps: