Looking for a solution.
I have included a picture diagram below explaining what it is I am trying to acheive with a background image and some div boxes containing text. Basically I have a database application that stores background images and text associated with each entry in the database. And I output 20 or so of these entries that have 1 background image and some text for the div boxes associated with it (as seen in diagram below).
Because I want the div boxes to sit a top the background image... the perfect thing for me to do would be to take the background image and make it a CSS background image (ie. background: url(http://www...etc) no-repeat top left). However, the only way I could achieve this (remember these images are coming out of the database) is to place the image URL's in the xhtml using inline CSS.. which is not really what I would like. I don't believe there is a way to use dynamic external css... so that is out of the equation.
So I think what I have to do is output the background images as a standard image in xhtml (ie. <img src..>) and use CSS to position the div boxes/text over top the background image somehow, but still allow the div boxes to expand down if there is too much text or if the user's browser settings are set to a larger font size than default.
I am really looking for some advice on how you would go about putting these pieces together. And this wouldn't be hard if I didn't have to do this all from data in a database. It is for this reason that I can't use external stylesheets setting all the background images, because I can't use dynamic php in external stylesheets. So any help on this matter would greatly be appreciated. The diagram is below for aide. Thanks.
People train run out of Stubville.