4 Replies Latest reply on Jul 16, 2007 9:00 PM by milehighit

    Need Help w/CSS

    milehighit
      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
        • 1. Re: Need Help w/CSS
          craigkaminsky Level 3
          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:
          • 2. Re: Need Help w/CSS
            milehighit Level 1
            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
            • 3. Re: Need Help w/CSS
              efecto747 Level 1
              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>

              • 4. Re: Need Help w/CSS
                milehighit Level 1
                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