Responsive CSS logo image replacement with <a> tag

image-replacement.css

.logo {
  height: 80px;
  width: 100%;
  max-width: 290px;
}

/*Using Scott Kellum CSS image replacement technique and based on this tut: http://tutvid.com/webdesign/css-tutorial-image-replacementlink-logo-to-homepage/*/
.logo-image {
  display: block;
  background: url(../imgs/logo.png) no-repeat;
  margin: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  background-size: 100% auto;
  width: 100%;
  height: 100%;
}

/*This can be added to make logo retina-ready*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min-device-pixel-ratio: 1.2) {
	.logo-image {
		background-image: url(../imgs/logo@2x.png);
	}
}

image-replacement.html

<h1 class="logo text-left">
  <a class="logo-image" href="index.html">Logo Text</a>
</h1>