Thread

Hi!

Is it possible to call an uploaded file in css as a background image using the entries tag? I’m trying to code my rollovers without javascript. Here is the relevant part of the template:

{exp:channel:entries channel="{channel}" category="73"}

<ul id="staff">
  <li id="staff5"><a href="#"></a>
  </li>
</ul>

{/exp:channel:entries}

And here is the relevant part of the css, which is included in the template header so that the css will be processed using EE filters:

li#staff5 a:hover {
        background-image:url(/images/uploads/headshots/{exp:channel:entries channel="{channel}"}{photo_about_biopic}{/exp:channel:entries});
    background-repeat:no-repeat;
    text-indent:-9999em;
}

Of course there is a separate style declaration for the image when it’s not being rolled over—that is working fine. But when you roll over, the image area is just white.

Thanks!

It’s a bit ugly but you could place an style declaration above like below:

<style>
li#staff5 a:hover {
  background-image:url(/images/uploads/headshots/{photo_about_biopic};
  background-repeat:no-repeat;
  text-indent:-9999em;
}
</style>
<ul id="staff">
  <li id="staff5">
  </li>
</ul>

It’s not elegant but should suffice, assuming the image is part of the same channel entry.

Thanks for the suggestion, but unfortunately I am getting the same result that way. No image, just a white space.

I know calling an image field in the html requires placing an img tag around it—I tried that and it works, with the same image field as above. But I can’t do that with css…

Any other ideas?

How are you calling your .css files? If you’re using the {stylesheet=template_group/css_template} tag, no EE tags will be parsed. You could try with {path=template_group/css_template}, though.

The relevant styles are included in a style tag in the template. I tried first in the header, then, per the above suggestion, in the body, wrapped in the channel entries tag.

markoneil,

Does the following work for you? You dont need to include the file path for that custom field if it is an image type