set logo as div background

_includes/masthead.html

@@ -2,7 +2,8 @@
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
-        <a class="dynare_masthead_home_img" href="{{ '/' | relative_url }}"><img src="/assets/images/logo/dlogo.svg" alt="Dynare" width="150px" onmouseover="this.src='/assets/images/logo/dlogo_hover.svg';" onmouseout="this.src='/assets/images/logo/dlogo.svg';" /></a>
+        <div class="dynare_masthead_image_container_load_hover"></div>
+        <div class="dynare_masthead_image_container" onclick="location.href='{{ '/' | relative_url }}'"></div>
         <ul class="visible-links" id="dynare_masthead_ul">
           {%- for link in site.data.navigation.main -%}
             {%- if link.url contains '://' -%}

_sass/dynare.scss

@@ -543,3 +543,24 @@ ul.resources {
         flex: 100%;
     }
 }
+
+.dynare_masthead_image_container {
+    background-image: url(/assets/images/logo/dlogo.svg);
+    background-repeat: no-repeat;
+    background-size: 150px;
+    width: 150px;
+    height: 65px;
+    margin: auto;
+}
+
+.dynare_masthead_image_container:hover {
+    background-image: url(/assets/images/logo/dlogo_hover.svg);
+    cursor: pointer;
+}
+
+.dynare_masthead_image_container_load_hover {
+    background-image: url(/assets/images/logo/dlogo_hover.svg);
+    background-size: 150px;
+    background-position: -9999px -9999px;
+    background-repeat: no-repeat;
+}