Need Help w/CSS

[Guest]

I am trying to use CSS to dynamically set the background image of a specific location in a table based on a "URL.Parameter". Is there a way to to use a parameter passed from a calling page in CSS?

Example:

<style>
<!--
@media print
{
.body { display:none }
}
#ArtImage
{
background-image:url(../../images/fullpics/#session.mydirectoryname#/#url.filename#.jpg);
background-repeat:no-repeat;
}
-->
</style>

to be used as follows:

<div>
<table align="center">
<tr><td>
<cfoutput>
<td id="ArtImage" height="#IMG_HEIGHT#" width="#IMG_HEIGHT#">
<img border="4" height="#IMG_HEIGHT#" width="#IMG_WIDTH#" src="cover.gif">
</td></cfoutput>
</td>
</tr>
</table>
</div>

Been banging my head with this. IF I use:

<td background="#URL.SomeImageName#">

I get tiling and this is not acceptable.

Any help will be appreciated

John

[craigkaminsky]

John:

I created a test page with the basics of what you have here and was able to get the background to work on Macs and PCs. One ting I noticed is that you do not have a cfoutput in your style tag. This may be an oversight copying code into the forum but this line:

background-image:url(../../images/fullpics/#session.mydirectoryname#/#url.filename#.jpg);

does not have cfoutput around the cf variables, whereas your table cell does.

One other note, though it's not affecting the display, is that your table is malformed html. You have:
open table
open row
open cell
open cell
close cell
close cell
close row
close table

Do you need the outer table cell (the one around td id=ArtImage")? I was able to get the background to display regardless of whether or not this outer cell was there but just wanted to note it.

Here's the code I used to test:

[Guest]

I am able to get the BG image to display if I define it statically in the <Style>. The problem is that I need the image to dynamically populate (Kinda a underhanded way to keep normally honest people from printing the image without paying for it.)

I cannot predefine dimensions as not all images are the same. I have banged my head for weeks off and on and my BOSS (Spelled WIFE) is asking me 30 times a day to resolve this issue.

John

[efecto747 · Accepted solution]

John, I think craigkaminsky has already identified the problem. In your style definition you're using cf variables in:

background-image:url(../../images/fullpics/#session.mydirectoryname#/#url.filename#.jpg);

but they aren't inside a cfoutput tag.

try something like this:

<style>
<!--
@media print
{
.body { display:none }
}
#ArtImage
{
<cfoutput>
background-image:url(../../images/fullpics/#session.mydirectoryname#/#url.filename#.jpg);
</cfoutput>
background-repeat:no-repeat;
}
-->
</style>

[Guest]

Thanks. I had tried the cfoutput earlier and it threw an error. The problem was where I originally placed the tag begin and end. one more problem resolved and one less monkey on my back. thanks again for the help.

John