Blockquote icon doesnt seem right on bigger width

Question

iam trying to edit css to my page , more specific my blockquote icon doesnt seem right. well in order to show up 100% on height i have to write down 2 lines of blockquote at least. Otherwise it is showed by 50% of the icon. Here is the example http://jsfiddle.net/pbdy08bn

If you drag the window of the result to get the notes on one line, then the icon is showed up on half. 2 lines and more is fine.

Can somebody help?

Thanks in advance.

css of the blockquote is here

.blockquote{line-height:1.3em;font-style:italic}
.blockquote{margin: 15px 30px 0 10px;
padding-left: 60px;
background: url('http://4.bp.blogspot.com/_8tkQy1JVYgQ/S5y1DkIn5mI/AAAAAAAAAx4/74l13qOuWvc/s1600/quote.gif') top left no-repeat;
}
.blockquote p{
margin: 5px 0 0;
display: block;}

Answer 1

You can use background-size to scale down the image. Another way is to declare a min-height to the containing element, so that the height is never below the height of the blockquote image.

Could this work in your case? http://jsfiddle.net/pbdy08bn/1/