diff --git a/badges/renderer.php b/badges/renderer.php
index 2b62f3706b7..298262ac208 100644
--- a/badges/renderer.php
+++ b/badges/renderer.php
@@ -322,7 +322,15 @@ class core_badges_renderer extends plugin_renderer_base {
         $badgeclass = $ibadge->badgeclass;
         $badge = new badge($ibadge->badgeid);
         $now = time();
-        $expiration = isset($issued['expires']) ? $issued['expires'] : $now + 86400;
+        if (isset($issued['expires'])) {
+            if (!is_numeric($issued['expires'])) {
+                $issued['expires'] = strtotime($issued['expires']);
+            }
+            $expiration = $issued['expires'];
+        } else {
+            $expiration = $now + 86400;
+        }
+
         $badgeimage = is_array($badgeclass['image']) ? $badgeclass['image']['id'] : $badgeclass['image'];
         $languages = get_string_manager()->get_list_of_languages();
 
@@ -431,9 +439,6 @@ class core_badges_renderer extends plugin_renderer_base {
         }
         $dl[get_string('dateawarded', 'badges')] = userdate($issued['issuedOn']);
         if (isset($issued['expires'])) {
-            if (!is_numeric($issued['expires'])) {
-                $issued['expires'] = strtotime($issued['expires']);
-            }
             if ($issued['expires'] < $now) {
                 $dl[get_string('expirydate', 'badges')] = userdate($issued['expires']) . get_string('warnexpired', 'badges');
 
diff --git a/theme/boost/scss/moodle/core.scss b/theme/boost/scss/moodle/core.scss
index bc9553b83ef..db6b419bec0 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -1866,10 +1866,13 @@ ul.badges {
 }
 
 .badges li .expireimage {
+    background-image: url([[pix:i/expired]]);
+    background-repeat: no-repeat;
+    background-size: 100px 100px;
     width: 100px;
     height: 100px;
     left: 25px;
-    top: 0;
+    top: 15px;
     position: absolute;
     z-index: 10;
     opacity: 0.85;
@@ -1887,6 +1890,9 @@ ul.badges {
     margin-bottom: 20px;
 
     .expireimage {
+        background-image: url([[pix:i/expired]]);
+        background-repeat: no-repeat;
+        background-size: 100px 100px;
         width: 100px;
         height: 100px;
         left: 0;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 8b4dbf94c4a..fa7870b7084 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11168,10 +11168,13 @@ ul.badges {
   position: relative; }
 
 .badges li .expireimage {
+  background-image: url([[pix:i/expired]]);
+  background-repeat: no-repeat;
+  background-size: 100px 100px;
   width: 100px;
   height: 100px;
   left: 25px;
-  top: 0;
+  top: 15px;
   position: absolute;
   z-index: 10;
   opacity: 0.85; }
@@ -11187,6 +11190,9 @@ ul.badges {
   margin-top: 17px;
   margin-bottom: 20px; }
   #badge-image .expireimage {
+    background-image: url([[pix:i/expired]]);
+    background-repeat: no-repeat;
+    background-size: 100px 100px;
     width: 100px;
     height: 100px;
     left: 0;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 825fe8c922b..76e6c532d63 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11379,10 +11379,13 @@ ul.badges {
   position: relative; }
 
 .badges li .expireimage {
+  background-image: url([[pix:i/expired]]);
+  background-repeat: no-repeat;
+  background-size: 100px 100px;
   width: 100px;
   height: 100px;
   left: 25px;
-  top: 0;
+  top: 15px;
   position: absolute;
   z-index: 10;
   opacity: 0.85; }
@@ -11398,6 +11401,9 @@ ul.badges {
   margin-top: 17px;
   margin-bottom: 20px; }
   #badge-image .expireimage {
+    background-image: url([[pix:i/expired]]);
+    background-repeat: no-repeat;
+    background-size: 100px 100px;
     width: 100px;
     height: 100px;
     left: 0;