Media Queries

Change a background image responsively

by Gustavo Carvalho

HTML

<div id="logo"></div>

CSS

#logo {
    background: url('https://dl.dropboxusercontent.com/u/37981960/images/stackoverflow/before.png') no-repeat;
    width: 271px;
    height: 267px;
}
@media (min-width: 400px) {
    #logo {
        background: url('https://dl.dropboxusercontent.com/u/37981960/images/stackoverflow/result.png') no-repeat;
    }
}