Activate a new logo within a div at certain width

Question

I would like to have a different logo image when my site goes to tablet/mobile size. I figured the best way to do this is rather than have a img src within the div, set the logo as a background image to my div/id.

When my page goes below 990px a different mobile logo is displayed.

This is what I have, it works but is this the correct way to do this?

https://jsfiddle.net/omca16oe/

    <div id="logo"><a href="/home"></a></div>

    #logo  {
        background-image:url('http://i.imgur.com/O49APFa.jpg');
        background-repeat: no-repeat;
        display:block;
        width:452px;
        height:62px;
    }

    @media (max-width:990px) {
    #logo  {
        background-image:url('http://i.imgur.com/CNYdTsD.jpg');
        background-repeat: no-repeat;
        display:block;
        width:452px;
        height:62px;
    }
    }

Answer 1

It works, but usually you would use a mobile-first appropach in this case, because the desktop logos/images usually are larger and won't be loaded at all on mobile devices then (= reducing bandwidth), like:

#logo  {
            background-image:url('http://i.imgur.com/CNYdTsD.jpg');/* mobile logo */
            background-repeat: no-repeat;
            display:block;
            width:452px;
            height:62px;
}
@media (min-width:991px) {
  #logo  {
            background-image:url('http://i.imgur.com/O49APFa.jpg'); /* desktop logo */
  }
}

Also, avoid repetition of stuff that's already there (like "display: block" etc.)