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 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.