Using a repeatable image as a border

I've done this example for people many times. The trick is simple, apply a repeatable image to a container block and then make the children have a solid background.

The following example uses <blockquote> as the container and <p> as it's children.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus pharetra, wisi fringilla posuere interdum, leo eros pellentesque eros, non venenatis tellus ligula ac neque. Phasellus pede. Nulla facilisi. Integer diam tortor, varius vitae, sodales sit amet, faucibus ut, odio. Curabitur quam sapien, rutrum sit amet, porta vel, dapibus ut, tortor. Phasellus a mi vel ipsum auctor dictum. Integer vel nunc.

Curabitur dolor. Mauris tempus. Ut purus tellus, cursus ac, aliquet at, tempor sed, metus. Vivamus tempus euismod sapien. Maecenas a urna. Morbi pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce consectetuer fermentum justo.

Like I said, the trick is very simple:

blockquote.image-border {
	background-image: url(image-border.gif);
	padding: .5em;
	margin: 1em;
}
blockquote.image-border p {
	margin: 0; padding: 0;
	background-color: #fff;
	padding: .25em;
}