diff --git a/erpnext/www/lms/course.html b/erpnext/www/lms/course.html
index 0bfd059..84cad36 100644
--- a/erpnext/www/lms/course.html
+++ b/erpnext/www/lms/course.html
@@ -45,7 +45,7 @@
 			<div>
 		{% endif %}
 			{% if topic.hero_image %}
-			<div class="card-hero-img" style="background-image: url({{ topic.hero_image }})"></div>
+			<div class="card-hero-img" style="background-image: url('{{ topic.hero_image }})'"></div>
 			{% else %}
 			<div class="card-image-wrapper text-center">
 				<div class="image-body"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
diff --git a/erpnext/www/lms/macros/card.html b/erpnext/www/lms/macros/card.html
index f227355..9964d2d 100644
--- a/erpnext/www/lms/macros/card.html
+++ b/erpnext/www/lms/macros/card.html
@@ -3,7 +3,7 @@
 	<a href="/lms/program?program={{ program.name }}" class="no-decoration no-underline">
 	<div class="card h-100">
 		{% if program.hero_image %}
-		<div class="card-hero-img" style="background-image: url({{ program.hero_image }})"></div>
+		<div class="card-hero-img" style="background-image: url('{{ program.hero_image }}')"></div>
 		{% else %}
 		<div class="card-image-wrapper text-center">
 			<div class="image-body"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
diff --git a/erpnext/www/lms/program.html b/erpnext/www/lms/program.html
index d122778..b6d6966 100644
--- a/erpnext/www/lms/program.html
+++ b/erpnext/www/lms/program.html
@@ -42,7 +42,7 @@
 	<a href="/lms/course?name={{ course.name }}&program={{ program.name }}" class="no-decoration no-underline">
 	<div class="card h-100">
 		{% if course.hero_image %}
-		<div class="card-hero-img" style="background-image: url({{ course.hero_image }})"></div>
+		<div class="card-hero-img" style="background-image: url('{{ course.hero_image }}')"></div>
 		{% else %}
 		<div class="card-image-wrapper text-center">
 			<div class="image-body"><i class="fa fa-picture-o" aria-hidden="true"></i></div>