href背景图像显示不使用chrome

Question

问题只发生在我添加一个以前只是一个div的href时。我在safari中查看了网站，一切都很好但是当我用chrome打开它时，背景图像变成了一个灰色框。

我读了一个显示的问题：一旦网站上线，内联块应该修复它所以我更新了我的github但没有运气！任何帮助都会非常感激，因为我不想删除背景图片。

这是我的github页面...... https://michael-hands.github.io/jennielouise/

<a href="gallery.html" class="cake-smash">
   <div class="box1">
      <h2>Cake Smash</h2>
         <p class="animated">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
 </a>

.cake-smash
   position: relative
   height: 50%
   width: 100%
   display: block
   background-image: url("../img/cakesmash.jpg")
   background-position: center center
   background-repeat: no-repeat
   background-size: cover
   text-align: center
   display: inline-block
   margin-bottom: -5px
   padding: 0