Go to the bottom of your theme (assuming it's derived from Default) and you should see something like the following with a couple of additions/alterations I'm highlighting:
Changes/additions:
1. Altered the existing padding-left value from 16px to 0px (otherwise the image is offset).
2. Added a new #ppm_login_message_top section (there are others already in the file, that's OK to have more than one).
3. Populated the section with a base64 encoded version of the image, and its correct width and height
If you wonder how to base64 encoded your image, there are 3rd party tools with this ability (I think Fiddler can do it, and there are some web sites that will offer to do it free also). Alternatively, I wrote a javascript 'book marklet' that lets me open an image into IE and then access the bookmark which copies the base64 string of the image to the clipboard ready to paste into the theme - a derivation of some similar work I saw in a demo/tutorial function to achieve similar:
javascript:function convertImgToBase64URL(url){ var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; img.crossOrigin = 'Anonymous'; img.onload = function(){ var dataURL; canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); dataURL = canvas.toDataURL('image/png'); window.clipboardData.setData('Text', dataURL.substring(22)); canvas = null; }; img.src = url; }; convertImgToBase64URL(location.href);
That's all entered onto 1 line and can be used as the location/address of a bookmark.
Edit: Example web site offering this service: Base64 Image Encoder
End result:
Edit: Without the full base64 encoded image, here's the text of those last 2 sections of my CSS example:
/* The The login service messagage style */
#ppm_login_message_top,#ppm_login_message_bottom{
color: #fff;
font-family: Arial,Helvetica,Verdana,sans-serif;
font-size: 20px;
font-weight: bold;
padding-left: 0px;
text-wrap:normal;
}
#ppm_login_message_top
{
background: url(data:image/png;base64,iV ... ==);
width: 356px;
height: 120px;
}
I wanted to show this too, since unlike your example, mine has no additional attributes like margin: ... after the background: url attribute on the same line, but the image I provided doesn't make that obvious as it was cut short.