How can I replace an image using only a CSS Stylesheet - html

Question

I was wondering if it was possible to replace an image on an html page using the only the stylesheet. I know this is not common practice, but the only thing I have access to is the stylesheet and they used inline styles in the html. I have no way of editing the html file.
I inspected the element and it looks like this:
I'm trying to replace the "bullet_ball_glass_green" image. I was able to hide it by adding this to the stylesheet:
.rmLeftImage{
visibility: hidden;
}
But is it possible to replace the image or add another one on top of it without editing the html page?

Answer 1

You could set the background image of a div around the image (and keeping the css you have that hides the image).
.div_class{
background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%;
width:100px;
height:100px;
}

Answer 2

the css have a higher hierarchy than the style in html, you could just add
img.rmLeftImage {
background-image: url('path to your image');
}

Answer 3

Keep hiding the image with
visibility:hidden;
since you want it to keep the width/height of the image and change the background image with
background:url('urltoyourimage')

Answer 4

Here is, perhaps a slightly controversial technique with support on IE8+ and pretty much every other browser.
.rmLeftImage {
content: '';
}
.rmLeftImage:after {
display: block;
content: '';
background: url(../your/new/image);
width: 220px; /* image width */
height: 240px; /* image height */
position: relative; /* image width */
}
​
See http://jsfiddle.net/z9QUu/2/ for an example. I've only tested this in chrome so far, where it appears to work. Providing it works cross-browser, you won't need to modify the HTML, at all.
Interestingly, I could only get it to work when applying content: ''; to .rmLeftImage, heres the jsfiddle without it: http://jsfiddle.net/Mw76h/, just for demonstration purposes.