diff --git a/templates/zephyr/navbar.html b/templates/zephyr/navbar.html
index 736454996f..3fa9e17c09 100644
--- a/templates/zephyr/navbar.html
+++ b/templates/zephyr/navbar.html
@@ -8,8 +8,8 @@
         <div class="span8" id="navbar-middle">
           <a class="brand skinny-user-gravatar visible-phone" href="#"
              title="{{user_profile.full_name}} - {{user_profile.email}}">
-            <img class="img-rounded gravatar-profile"
-                 src="{{ avatar_url }}&s=30" />
+            <div class="gravatar-profile"
+                 style="background-image: url('{{ avatar_url }}&s=30');"></div>
           </a>
           <div id="searchbox">
             <form id="searchbox_form" class="form-search navbar-search">
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 1f4a82a36f..ed1d6aa50d 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -76,6 +76,17 @@ li, .table th, .table td {
     font-weight: 300;
 }
 
+.navbar .gravatar-profile {
+    width: 30px;
+    height: 30px;
+    background-size: 30px 30px;
+    background-repeat: none;
+    border-radius: 30px;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0px rgba(255, 255, 255, 1);
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0px rgba(255, 255, 255, 1);
+    -moz-mox-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0px rgba(255, 255, 255, 1);
+}
+
 /* Classes for hiding and showing controls */
 
 .notdisplayed {