Image Splice for Responsive Logo Header

[etidd]

Hello all,

I am making a header image that will change to a slimmer image splice with a media query when the viewport is slimmer. My test page is located here. The graphic I have designed is located here. You’ll see that I have simply made a containing div and a span that the height can change, but I don’t know exactly how to proceed to achieve the splice effect, while also maintaining image with fluid sizes…

.head .headerlogo {
background:url("WRGImg.png") no-repeat scroll;
min-height:58px;
max-height:135px;
}

This is the only bit of styles I have done. It starts on line 52.

Thanks all for your help!

-tyler