Bild nur auf kleineren Bildschirmen anzeigen

Kann mir jemand helfen, den folgenden Code so zu ändern, dass das Bild nur in der Mobilansicht angezeigt wird. Im Moment ist es immer sichtbar.

<style type="text/javascript">
      .icon-xyz
      {float: left; width: 22px;cursor: pointer;background: none;}

      @media only screen and (max-device-width: 568px) and (min-device-width: 320px) and (orientation: portrait)
     {.icon-xyz {float: left;width: 22px;background: none;cursor: pointer;padding: 0 13px !important;}}

</style>

Following ist das Skript zum Hinzufügen eines Bildes:

$(document).ready(function() {
      var loc = window.location;
      if (loc.toString().toUpperCase().indexOf('/home/') > -1)
      {
      $("#icon-xyz").css("background", "url(/images/Icon1.png) no-repeat");
      if($.cookie("lang") == "es")
      {
      $("#icon-xyz").css("background", "url(/images/Icon2.png) no-repeat");
      }
      }
});

https: //jsfiddle.net/ad8bc8tv/1

Antworten auf die Frage(2)

Ihre Antwort auf die Frage