When adding the CSS you would just make the image and depending on your template, you could make an image, and then add a CSS property (then adding the Div id to your header template) something like:
Then add it to your header template where you want it. Edit width as you want it. You could also remove top left repeat-x if you made the image the actual size you want it to be, I usually do 1px wide by however tall I want it and have the repeat.
You can add a gradient to it. This may not be the exact proper way, but, it works, and if you compress the image when you make it, you wouldn't have much of an added load time/bandwidth usage.
Code:
.message {
background: url(images/image.png) top left repeat-x;
width: 200px;
color: #000000;
border: 1px solid #000000;
border-top: 0;
margin: auto auto;
text-align: left;
Then add it to your header template where you want it. Edit width as you want it. You could also remove top left repeat-x if you made the image the actual size you want it to be, I usually do 1px wide by however tall I want it and have the repeat.
You can add a gradient to it. This may not be the exact proper way, but, it works, and if you compress the image when you make it, you wouldn't have much of an added load time/bandwidth usage.