Reemplazar imagen con otra al achicar pantalla CSS

[ArturoGallegos]

Hombre que te complicas, con CSS tienes 3 opciones

1.- incrusta en html todas tus imagenes y segun la resolucion vas mostrando una u otra, esto seria mas o menos asi:

Código HTML:

<a href="#" class="logo">
    <img src="img-t1.jpg" alt="" class="width1">
    <img src="img-t2.jpg" alt="" class="width2">
    <img src="img-t3.jpg" alt="" class="width3">
</a>
 

Código CSS:

.logo img{display:none;}
.logo .width1{display:block;}
@media (max-width:960px){
    .logo .width2{display:block;}
    .logo .width1{display:none;}
}
@media (max-width:760px){
    .logo .width3{display:block;}
    .logo .width2{display:none;}
}
 

2.- con css ve cambiando el tamaño de la imagen:

Código CSS:

@media (max-width:960px){
    .logo img{width:120px;height:auto;}
}
@media (max-width:760px){
    .logo img{width:90px;height:auto;}
}
 

3.- lo mismo que ya planteaste, solo que hay que utilizar un div, un h1, u otro elemento para asignarle el logo como background, opcionalmente podrias agregar background-size para no cambiarla a cada rato.