Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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: {
    display:block;
    width:300px;
    height:200px;
    text-decoration:none;
    background:url(images/oldtable.jpg);
    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.

share|improve this question
1  
you can not run <?php ?> in .css –  amit Aug 6 '12 at 19:32
    

3 Answers 3

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.

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

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

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 ...
</div>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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