I experimented a new background for all the blockquote tags on the site. The concept is quite simple, but the restrictions are a lot. You need to have the same background color everytime and the blockquote element must have a fixed width.

blockquote {
display: block;
font-size: 8pt;
padding: 5px 46px 5px 9px;
width: 380px;
margin: 22px 0px 22px 15px;
background: #DDF0F5 URL(img/quote.gif) no-repeat;
border-bottom: 1px solid #9CCAD8;
}

This is the code I use for the blockquote element. With a nice background image:

Note: the white space you see in the middle is transparency. The white made by the “wicked and worn” effect is “real” white. Result, on a white background:

This is a simple blockquote element.

That is expandable. But not too far.

Because if it goes too far, we’ll lose the background image because we didn’t set it to “repeat”. Although it won’t make a huge difference, because the background is still simple. We’ll just lose the “dirt” effect on the box sides.

Some questions still left though:

• What if we don’t want to use fixed-width blockquotes?
• What if we have a 400 lines quotes?
• What if we have to work with different background colors?

So, you can see it, the technique is not very optimal. But it still works correctly.