vertical-align content-generated image?

#q:before {
	content: url(image.gif);
}

<span id="q">some text</span>


How do I vertical-align the image? 
I can vertical-align its anonymous inline container, 
but vertical-align does not inherit.

Or, how does one put a border on the image? 
One can put a border around its inline container, 
but that border doesn't quite trace the edges of 
the image.

Or, how do I get a colored background behind the image?
I can 'background' its anonymous inline container,
but the colored canvas doesn't line up with the image.

I can't figure out how to address this image, yet 
I'm quite convinced I should be able to.

Anyone care enlighten me?