I activated the post thumbnail by putting this in the functions.php:

add_theme_support( 'post-thumbnails');

And this in the loop.php:

<?php the_post_thumbnail('full', array ('class' => 'rollover')) ; ?>

And voila, the featured image appears on the main page, hopefully with the class of "rollover."

But what I want to do is turn this into a sprite. On my static HTML markup I wrote:

a.rollover: {
    arollover:hover {background-position:-300px 0;

It works, but how do I make this dynamic (is that the word?) What do I substitute for the url so that the background url changes for each thumbnail? I tried this and it didn't work:

background:url(<?php wp_get_attachment_image_src());

Can someone help? Thanks.


This is not a WordPress related, Anyway here is tip -

You can not call a <?php .. ?> function into your style.css file. Instead set the background inline just as shown in this example, and apple styling.

<div style="background: url('<?php wp_get_attachment_image_src(); ?>');">
   // blah blah ...
| improve this answer | |

you can use a trick :)

create a css.php in your theme, and use <?php get_template_part('css'); ?> when you need in your templates.

in your css.php you can use call to wp_get_attachment_image_src(), etc... define $vars for your colors (theme options) and so on...

| improve this answer | |
  • with this trick you can keep css abstraction of your code, and reuse this css – Tribalpixel Aug 6 '12 at 20:35
  • ...or you can just switch to LESS (there's WP-Less on GitHub). – kaiser Aug 6 '12 at 21:15

I could NOT get the sprite to work. I ended up using two separate images, positioning them on top of each other, and styling their opacity based on the rollover state.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.