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.


3 Answers 3


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 ...

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...

  • with this trick you can keep css abstraction of your code, and reuse this css Commented Aug 6, 2012 at 20:35
  • ...or you can just switch to LESS (there's WP-Less on GitHub).
    – kaiser
    Commented Aug 6, 2012 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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