Image replacement

by Aaron Kahlhamer

HTML

<h1 class="ir">Kohl's Version</h1>
<!-- http://css.kohls.com/media/css/global.css -->


<h1 class="ir-hbt">HTML5 Boilerplate Version</h1>
<!-- https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/css/main.css -->

CSS

.ir {
    background-color:transparent;
    border:medium none;
    color:transparent;
    font:0/0 sans-serif;
    text-shadow:none;
    overflow:hidden;
}

.ir:before {
    content:"";
    display:block;
    height:100%;
    width:0
}

.ir-hbt {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir-hbt:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.ir-hbt {
    background-image: url(http://media.kohls.com.edgesuite.net/is/image/kohls/cm-lp-20130903-catherine-malandrino-logo-dark-p?scl=1&fmt=png-alpha);
    height:132px;
    width:624px;
}