JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<h1>OMG image replacement is complicated.</h1>

<h1 class="high-contrast-safe"><b></b>OMG image replacement is indeed complicated.</h1>

SCSS

h1 {
    background-image: url(http://profile.ak.fbcdn.net/hprofile-ak-ash3/158049_122908054392375_781748981_n.jpg);
    width: 180px;
    height: 0;
    margin-bottom: 1em;
    overflow: hidden;
    padding-top: 180px;
}

h1.high-contrast-safe {
    background-image: none;
    height: 180px;
    padding-top: 0;
    position: relative;
    width: 180px;
    
    b {
        backgrzound-image: url(http://profile.ak.fbcdn.net/hprofile-ak-ash3/158049_122908054392375_781748981_n.jpg);
        bottom: 0;
        display: block;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;        
    }
}