I don't think there's a way of doing this but thought I'd ask anyway.
I have a site that has a tiled pattern and therefore I have to have to use transparent images for buttons and suchlike.
What I would like to do is have a button and then using :before and :after to add images on the left and right of the text and then have a repeating x image on the button text background.
I would normally do this the following way:
and then add the background image to the left and right divs and have a repeated background image on the mid div.
The thing is i'm trying to style a plugin in Wordpress and it's way too much hassle to go through all instances of buttons and code them again so I would like to be able to do this:
and then using css have something like this:
background: transparent url('images/bt-cn.png') no-repeat;
background-size: auto 40px;
background: transparent url('images/bt-lf.png') no-repeat;
background: transparent url('images/bt-rt.png') no-repeat;
But the problem with that is the repeated image on the my-button div spans over the left and right images. This would be achievable if the buttons had a solid background but they're transparent.
Any ideas or help would be greatly appreciated.