background-color: transparent;
Have you given this a try?
UPDATE
Check out this link for more information.
border-width: 20px;
border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
-moz-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
-webkit-border-image: url("//i.imgur.com/hg2Thfa.png") 20 stretch;
Understanding how this method works may take some time. The border of the image acts as padding, appearing thicker than usual. You can achieve the desired effect by specifying the top border thickness in your code:
border-image: url("//i.imgur.com/hg2Thfa.png") 20 0 0 0 stretch;
This code means the top border of your div will use the top 20 pixels of the image, while the rest will be used in the content area of your div. Border-image is a versatile tool for achieving this effect.
While there are other methods available, using border-image is one way to accomplish this. Here is the fiddle link again for reference: http://jsfiddle.net/FCXGu/3/
I've included a content area in this fiddle to provide a visual representation of the elements: http://jsfiddle.net/FCXGu/4/
Depending on your specific image, page layout, and requirements, different techniques such as using stretch vs. repeat may be more suitable. Keep in mind that border-image may not be supported in all browsers, so compatibility should be considered when implementing it.