diff --git a/badges/renderer.php b/badges/renderer.php
index 13415fdc9c9..b98aae110a7 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();
 
@@ -432,9 +440,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 987fed9d544..8bba6e735f0 100644
--- a/theme/boost/scss/moodle/core.scss
+++ b/theme/boost/scss/moodle/core.scss
@@ -1870,10 +1870,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;
@@ -1891,6 +1894,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 076e9532536..3254995fdeb 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -11173,10 +11173,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; }
@@ -11192,6 +11195,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 60e19a260f9..13fe4928724 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -11383,10 +11383,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; }
@@ -11402,6 +11405,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;