diff --git a/addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml b/addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml
index 002c2fcdc95..a9c52659d1e 100644
--- a/addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml
+++ b/addons/point_of_sale/static/src/app/customer_display/customer_display_template.xml
@@ -29,25 +29,27 @@
     </t>
 
     <t t-name="point_of_sale.CustomerFacingDisplayNoOrder">
+        <t t-set="backgroundImageURL" t-value="pos.config.iface_customer_facing_display_background_image_1920 ? 'url(/web/image/pos.config/' + pos.config.id + '/iface_customer_facing_display_background_image_1920)' : 'none'" />
         <t t-call="point_of_sale.CustomerFacingDisplayHead" />
 
-        <div class="pos-customer_facing_display pos-no-order pos-palette_01" t-attf-style="background-image: #{backgroundImageCSSValue};">
+        <div class="pos-customer_facing_display pos-no-order pos-palette_01" t-attf-style="background-image: #{backgroundImageURL};">
             <!-- The remote display replaces pos-customer_facing_display contents, but not it  -->
             <!-- Therefore, pos-no-order is an inner div -->
-            <div class="pos-no-order" t-attf-style="background-image: #{backgroundImageCSSValue};">
+            <div class="pos-no-order" t-attf-style="background-image: #{backgroundImageURL};">
                 <div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
             </div>
         </div>
     </t>
 
     <t t-name="point_of_sale.CustomerFacingDisplayOrder">
+        <t t-set="backgroundImageURL" t-value="pos.config.iface_customer_facing_display_background_image_1920 ? 'url(/web/image/pos.config/' + pos.config.id + '/iface_customer_facing_display_background_image_1920)' : 'none'" />
         <!-- Header -->
         <t t-call="point_of_sale.CustomerFacingDisplayHead" />
 
         <div class="pos-customer_facing_display pos-palette_01">
             <!-- Only visible in portrait orientation -->
             <div class="pos-portrait-top">
-                <div class="pos-header" t-attf-style="background-image: #{backgroundImageCSSValue};">
+                <div class="pos-header" t-attf-style="background-image: {{backgroundImageURL}};">
                     <div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
                 </div>
             </div>
@@ -57,7 +59,7 @@
                 <t t-call="point_of_sale.CustomerFacingDisplayMainContainer" />
             </div>
 
-            <div class="pos-payment_info" t-attf-style="background-image: #{backgroundImageCSSValue};">
+            <div class="pos-payment_info" t-attf-style="background-image: {{backgroundImageURL}};">
                 <!-- Company Logo only visible in landscape orientation -->
                 <div class="pos-company_logo" t-attf-style="background-image:url(/logo?company=#{pos.company.id})" />
 
diff --git a/addons/point_of_sale/static/src/app/store/pos_store.js b/addons/point_of_sale/static/src/app/store/pos_store.js
index 00bf8742da4..4e48ad3d401 100644
--- a/addons/point_of_sale/static/src/app/store/pos_store.js
+++ b/addons/point_of_sale/static/src/app/store/pos_store.js
@@ -1021,21 +1021,11 @@ export class PosStore extends Reactive {
      * @returns {string}
      */
     async customerDisplayHTML(closeUI = false) {
-        const backgroundImageBase64 =
-            this.config.iface_customer_facing_display_background_image_1920;
-        let backgroundImageCSSValue;
-        if (backgroundImageBase64) {
-            backgroundImageCSSValue = "url('data:image/png;base64," + backgroundImageBase64 + "')";
-        } else {
-            backgroundImageCSSValue = "none";
-        }
-
         const order = this.get_order();
         if (closeUI || !order) {
             return renderToString("point_of_sale.CustomerFacingDisplayNoOrder", {
                 pos: this,
                 origin: window.location.origin,
-                backgroundImageCSSValue,
             });
         }
 
@@ -1053,7 +1043,6 @@ export class PosStore extends Reactive {
             pos: this,
             formatCurrency: this.env.utils.formatCurrency,
             origin: window.location.origin,
-            backgroundImageCSSValue,
             order,
             productImages,
         });