diff --git a/layout/_partial/sidebar/logo.ejs b/layout/_partial/sidebar/logo.ejs
index 523837c..d31e53c 100644
--- a/layout/_partial/sidebar/logo.ejs
+++ b/layout/_partial/sidebar/logo.ejs
@@ -2,7 +2,7 @@
   <% if (md_text(theme.sidebar.logo.avatar)) { %>
     <a class='avatar' href='<%- url_for(md_link(theme.sidebar.logo.avatar) || "/") %>'>
       <% if (theme.style.animated_avatar.animate) { %>
-        <img no-lazy class='bg' style='opacity:0' src='<%- theme.style.animated_avatar.background %>'/>
+        <div class='bg' style='opacity:0;background-image:url("<%- theme.style.animated_avatar.background %>");'></div>
       <% } %>
       <img no-lazy class='avatar' src='<%- md_text(theme.sidebar.logo.avatar) %>'/>
     </a>
diff --git a/source/css/_layout/sidebar/sidebar.styl b/source/css/_layout/sidebar/sidebar.styl
index c0da4cf..ffd0868 100644
--- a/source/css/_layout/sidebar/sidebar.styl
+++ b/source/css/_layout/sidebar/sidebar.styl
@@ -26,6 +26,10 @@
     border-radius: 50px
     overflow: hidden
     margin-right: 1rem
+    div.bg 
+      width: 100%
+      height: 100%
+      background-size: cover
     img.avatar
       margin: 2px
       object-fit: cover
@@ -33,7 +37,7 @@
       height: "calc(100% - 2 * %s)" % @margin
       border-radius: @width
     if hexo-config('style.animated_avatar.animate')
-      img.bg
+      div.bg
         trans1: opacity
         position: absolute
         opacity: 0 !important
@@ -44,13 +48,13 @@
         to
           transform:rotate(360deg)
     if hexo-config('style.animated_avatar.animate') == 'always'
-      img.bg
+      div.bg
         opacity: 1 !important
         animation: spin infinite 1s
         animation-timing-function: linear
     if hexo-config('style.animated_avatar.animate') == 'auto'
       &:hover
-        img.bg
+        div.bg
           opacity: 1 !important
           animation: spin infinite 1s
           animation-timing-function: linear