Applying a different logo for each color scheme in a WordPress theme through stylesheets

Question

I'm making a WordPress theme which has separate color schemes which are loaded through a secondary CSS file. I would like to use a different color logo for each color scheme, but I'm not sure the best way to go about it.

The logo currently uses the img tag, and I'm using the standard max-width: 100%; height: auto; to make it responsive. I would like to retain the responsive aspect, but I want the logo's URL to be handled through the stylesheet, so that it can be easily switched for each color scheme. However, if I replace the img with a div, I can not figure out how to make it responsive using the background-image property, without specifying specific dimensions. I don't want to specify exact dimensions to allow for different logo sizes.

Is there any way to do it like this, or am I just going about this the wrong way?

Answer 1

I prefer to use logo in background and while using different stylesheet, use different path of logo.
as in red.css

.logo{
background:url(images/redlogo.png)
}

and in blue.css

.logo{
    background:url(images/bluelogo.png)
    }