I understand and agree with the basic principle that if an image is part of the content of a page, it should be included as an IMG tag, whereas if it is a design element that is not part of the 'message', it should be a CSS background.
However, on a site I am doing at the moment, I have a client whose designer insists that all headings must be in Meta, so they have to be images for the benefit of us mere mortals who don't have every font known to man. To make matters more interesting, the title text is retrieved from a database and can change at the drop of a hat.
To generate these titles I have therfore used an image-generating PHP script, which is referenced something like this:
(long string of numbers includes things like foreground rgb, background rgb, font size etc)
Since I don't know the size of the image before it is generated, how can I create a CSS container for it? At the moment those images that are dynamic are being placed directly into the XHTML:
Is this appropriate practice, and can anyone suggest a more elegant solution?
best practice for background image with unknown size
If you are using the gd library to make the image, which I assume you are, rather than feed it directly, save it to a file, then use the gd getimagesize function to get the image attributes and then set these in the css using php echo's. This would have to be done inline rather than in the css file.
I am going to assume that there are a finite number of images you might make, and so caching these on the server makes sense.
The script would make a name that would accurately describe the image so that should it be needed again you could check to see if it exists, and only if it doesn't do you make a new image.
Would that work?