# AJAX RJS manipualation background image broken in IE 6

**URL:** <https://www.ruby-forum.com/t/ajax-rjs-manipualation-background-image-broken-in-ie-6/118891>\
**Category:** Deployment\
**Created:** [November 1, 2007, 1:52am UTC](https://www.ruby-forum.com/t/ajax-rjs-manipualation-background-image-broken-in-ie-6/118891 "2007-11-01T01:52:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![eblatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/7bcc69/32.png) [@eblatt](https://www.ruby-forum.com/u/eblatt)\
**Post date:** [November 1, 2007, 1:52am UTC](https://www.ruby-forum.com/t/ajax-rjs-manipualation-background-image-broken-in-ie-6/118891/1 "2007-11-01T01:52:36Z")

</div>

Let’s see who’s got the best cross-browser chops!

Here’s my problem:

#OBJECTIVE : change the background image of a div and have it work in IE  
6/7 and the real browsers.

#HTML:

...

At this point, my background image (image\_one.png) is visable in all  
three broswers. Upon an AJAX request, I’d like to update the background  
to ‘image\_two.png’. To accomplish this, I use RJS.

#RJS:

page[‘my-div’].setStyle(:background=\>url(‘[http://www.foo.com/image\_two.png](http://www.foo.com/image_two.png)’)  
")

#RESULTS:  
This works in firefox, but not in IE (v6, SP2), or Safari.

#QUESTIONS:

1. Is my RJS technique correct? Is there a more idiomatic/correct  
technique?
2. The seems like this a rather common programming objective, and there  
should be a straight-forward solution. Are other people doing this?
3. My cross-brower knowledge is not that great, but I’d love to find a  
good discussion of this topic, if someone knows of one.

---

<div class="post-metadata">

**Author:** ![eblatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/7bcc69/32.png) [@eblatt](https://www.ruby-forum.com/u/eblatt)\
**Post date:** [November 1, 2007, 3:53am UTC](https://www.ruby-forum.com/t/ajax-rjs-manipualation-background-image-broken-in-ie-6/118891/2 "2007-11-01T03:53:58Z")

</div>

Link to an external sheet and use classes. I’ve never had a problem  
doing it that way. It’s kind of frowned upon to use inline styles.

/\* styles.css \*/  
element.regular { background:url(images/image\_one.png) no-repeat; }  
element.alternate { background:url(images/image\_two.png) no-repeat; }

Then with rjs, just remove the regular class name and add the  
alternate or you can just add !important to the element.alternate  
style declaration.

Does that make sense?

---

<div class="post-metadata">

**Author:** ![eblatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/7bcc69/32.png) [@eblatt](https://www.ruby-forum.com/u/eblatt)\
**Post date:** [November 1, 2007, 4:22am UTC](https://www.ruby-forum.com/t/ajax-rjs-manipualation-background-image-broken-in-ie-6/118891/3 "2007-11-01T04:22:19Z")

</div>

John,

Thank you for your reply.

It certainly makes sense…but there’s rub. Perhaps not insurmountable.  
The problem is that the name of the file to serve as the background  
images is determined at run-time. Thus, referencing an external  
stylesheet would not be possible. However, I could use style tags like  
this:

element.regular { background:url(images/#{regular}.png) no-repeat; } element.alternate { background:url(images/#{alternate}.png) no-repeat; }

Thanks again, and I’ll report back.

---

<div class="post-metadata">

**Author:** ![eblatt](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/e/7bcc69/32.png) [@eblatt](https://www.ruby-forum.com/u/eblatt)\
**Post date:** [November 1, 2007, 2:11pm UTC](https://www.ruby-forum.com/t/ajax-rjs-manipualation-background-image-broken-in-ie-6/118891/4 "2007-11-01T14:11:12Z")

</div>

[http://blog.hasmanythrough.com/2007/10/18/simpler-than-dirt-restful-](http://blog.hasmanythrough.com/2007/10/18/simpler-than-dirt-restful-)  
dynamic-css

That will help if you are on a new enough version of trunk.