- - -
( live preview )

- - -

<raw-code><br /><table style="font-family: 'helvetica', 'avant garde', sans-serif; font-size: 11pt; color: #000; line-height: 140%; letter-spacing: 1pt; text-transform: uppercase;"><tr><td style="width: 400px; height: 330px; vertical-align: top;"><br /><br /> <div style="width: 400px; height: 200px; align: float; position: relative; background: #fff url(BACKGROUNDIMG); background-position: center; background-repeat: no-repeat; border: 1px solid #ccc; border-radius: 25px 25px 0 0;"> <div style="width: 100px; height: 96px; background: #ccc url(USERPICIMG); position: relative; top: -50px; left: 145px; border-radius: 50%; border: 5px solid #ccc; box-shadow: #333 0 2px 2px 0;"></div> <div style="width: 400px; height: 50px; background: #fff; position: relative; top: 90px; left: -1px; border: 1px solid #ccc; border-radius: 0 0 25px 25px; padding: 10px 0; text-align: center;">CHARACTERNAME<br /> <a href="LINKURL" style="font-family: 'helvetica', 'avant garde', sans-serif; font-size: 8pt; text-decoration: none; background-color: #ccc; color: #000; padding: 3px;">LINKTEXT</a></div> </div> </td></tr></table></raw-code>
#ccc or #cccccc

— background image size should be at least 400px by 200px
— it should look about the same when viewed on custom comment pages and on layouts (whew)
— updated the code, thanks stormy for the tip!
— yell at me if something goes weird; tested on chrome and firefox