How do I change an <img> tag so that I can choose the image in CSS?

Question

I have an image hard-coded in but I want to change it for different themes. How can I do this? I tried creating a span and setting its background-image property but it didnt work...

I don't want to hardcode the width/height either as the image I change it to could be another size.

Answer 1

I read somewhere you can apply a full transparent image, then set the background in CDs, but all the images would have to be the same size. Another solution would be to have every them stored in congruent folders on the server.

You cannot use CSS to set the img src directly however.

Answer 2

You have to define your height and width in order for the picture to show up. Otherwise it is limited to the height and width of whatever the browser defaults to for that element.

For instance, an empty span has no height or width, so any background image will be covering the background of an area of 0x0. You'll notice that if you put in "I hate static dimensions" in that span you tested, you'll get a small corner of your image.

Now, you could set the height and width in the CSS and therefore not hard-code it into the HTML, however you can only do this for elements with a display type of "block". you can't set an inline element (like a span) to have height, as they are inline. You could give it padding, but this is pretty hit-or-miss.

If you want the area to have height and width, but still flow inline, you can use display: inline-block; but IE will freak out if you do this on certain types of elements.

Answer 3

I don't think you can using purely CSS unless you specify the width and height. So just set the width and height in your CSS along with your image as background-image and your fine. You know which image you use in the theme so you should know its dimensions.

/* Theme1.css */
.ThemeImage
{
    background-image: url('imageTheme1.jpg');
    width: 150px;
    height: 100px;
}

/* Theme2.css */
.ThemeImage
{
    background-image: url('imageTheme2.jpg');
    width: 300px;
    height: 50px;
}

etc.

Answer 4

How about you have an <img>, with transparent image? then, you can change it's css.

<img src='transparent.gif' alt='image' id='change' />

img#change { background: url(pic1.jpg); width:200px; height:200px; }

Though, the images still need to be the same size...