CODEWITHSUNDEEP
csscss-sprites
rforte
rforte

Reputation: 1167

-webkit-border-image with css sprites

I'm using -webkit-border-image to specify my main sprite image in a style. The sprite image is a bunch of button images. What style attributes do I use to index into my main sprite image?

.red {
    -webkit-border-image: url(sprite.png) 0 14 0 14;
}

The red button sprite is at x=0, y=21.

What attributes do I use? If it were a background I'd use background-position. I’m not sure what to use for -webkit-border-image.

Upvotes: 4

Views: 3050

Answers (2)

Irae Carvalho
Irae Carvalho

Reputation: 787

I also was under the impression that sprites were not possible using border image. But I was proven wrong.

The border image syntax is as follows:

border-image: url([file]) [offsettop] [offsetright] [offsetbottom] [offsetleft];

border-image is tied to the border-width. It's possible to use the offset to choose the amount of the image to show from the origin (i.e. topoffset of 10px + border-top-width of 10px will show 10px from pixel 0 to pixel 10).

But if you use a border-width of 0px instead, it's possible to use the offset to hide a portion of the image. In this case you can use padding to achieve the same alignment as with border-width.

See this post (where I was corrected by Scott Murray, thanks Scott) for more info and demo:

http://alignedleft.com/blog/2010/07/using-css3-border-image-sprites-for-flexible-button-states/comment-page-1/#comment-832

Upvotes: 2

melhosseiny
melhosseiny

Reputation: 10154

You can't do that with border-image. According to this, CSS3 will define new syntax for image slices and image sprites.

Upvotes: 1

Related Questions