Using sprites in css background-image

[sreid99]

I'm using sprite-factory in my html like <%= link_to sprite_tag( "navicons_001_45", :title => "Edit", :alt => "" ), ...) %>

How can I also use sprites in my existing css where I have e.g.

background-image: url(/assets/navicons/001_24.png);

[jakesgordon]

Sorry, I'm not entirely sure I understand the problem. Can you go into a bit more detail ?

Thanks

[sreid99]

I'll try.

I can use sprites fine in my html.erb file, as above. but I'm not sure how to refer to them in my css (or css.erb) files. E.g. I currently have

#user_list .list_labels th .desc { background-image: url(/assets/navicons/001_22.png); }

and I want to convert it from using the .png to using one of the sprites I already use in the html. I think I somehow need to use s.gif, and apply the class e.g. navicons_001_22 to it, but I'm not sure how to do this in the css. If it's not possible, I could perhaps modify my html.erb file instead.

[jakesgordon]

Certainly the best solution would be if you could apply the navicons_001_22 class to the element directly in the generated html (e.g. the .desc element), obviously depends on how the html is generated but if its plain static html and you can apply the classname to it like this:

<span class='desc  navicons_001_22'>
   ...
</span>

Then you can tell sprite-factory to generate CSS that applies to a SPAN instead an IMG using the :selector option (see 'Customizing the CSS Selector' in the README)

SpriteFactory.run!('navicons', :selector => 'span.')

You can have sprite-factory generate CSS that can be applied to EITHER SPAN or IMG elements by providing an array of :selector options

SpriteFactory.run!('navicons', :selector => ['img.', 'span.']

Now the sprites should work on either an <img> or a <span> as long as they have the correct classname.

Check out the 'Customizing the CSS Selector' section in the README for example of this.

If that's not possible, one alternative is to cut & paste the values from the generated navicons_001_22 class and put them in your .desc declaration... but of course that is fragile and will need to be done every time you regenerate your sprite sheet...

So, one last suggestion is that the sprite-factory allows you to fully control the output css if you provide a block to the #run method you have full control over the output css. Its powerful, but a little tricky - you will want to read the 'Customizing the entire CSS output' section in the README.

In your case you will want to generate the normal sprite styles

img.navicon_001_01 { background: .... }
img.navicon_001_02 { background: .... }
...
...

but also append a line at the end that automatically duplicates the styles for navicon_001_22 into a style that applies to your element:

...
#user_list .list_labels th .desc { background: .... }

You will probably need something like this...

SpriteFactory.run!('navicons') do |images|
  result = []
  images.each do |name, image|         
     result << "img.#{name} { #{image[:style]} }"
  end
  result << "#user_list .list_labels th .desc { #{images[:navicon_001_22][:style] }"
  result.join("\n")
end

Checkout the details in the README in the 'Customizing the entire CSS output' section and let me know if that makes any sense ?