How to replace image using only CSS styles

Question

I was wondering if it is possible to replace the image on the html page using only the stylesheet. I know this is not a common practice, but the only thing I have access to is the stylesheet, and they used the built-in styles in html. I have no way to edit the html file.

I checked the item and looked like this:

I am trying to replace the image with "bullet_ball_glass_green". 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 can set the background image of the div around the image (and save the css that 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

css has a higher hierarchy than html style, you can just add

 img.rmLeftImage { background-image: url('path to your image'); } 

Answer 3

Hide the image with

visibility: hidden;

as you want to keep image width / height and change background image with

background: URL ('urltoyourimage')

Answer 4

Here, perhaps, a somewhat controversial method with support for IE8 + and almost 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 only tested this in chrome while it works. By providing it with a cross browser, you will not need to modify the HTML at all.

Interestingly, I could only make it work when applying content: ''; before .rmLeftImage , without it: jafiddle: http://jsfiddle.net/Mw76h/ , for demo purposes only.