diff --git a/src/css/tabs/osd.css b/src/css/tabs/osd.css
index e9d71d9c..5f4d4ea2 100644
--- a/src/css/tabs/osd.css
+++ b/src/css/tabs/osd.css
@@ -333,6 +333,16 @@
   height: 18px;
 }
 
+#font-logo-preview-container {
+  background:rgba(0, 255, 0, 0.4);
+  margin-bottom: 10px;
+}
+
+#font-logo-preview {
+  background:rgba(0, 255, 0, 1);
+  line-height: 0; 
+}
+
 .tab-osd .content_wrapper {
   height: calc(100% - 70px);
 }
diff --git a/src/js/tabs/osd.js b/src/js/tabs/osd.js
index 5cf6fc3c..ce9a0b03 100755
--- a/src/js/tabs/osd.js
+++ b/src/js/tabs/osd.js
@@ -1834,7 +1834,7 @@ TABS.osd.initialize = function (callback) {
 
         // font preview window
         var $preview = $('.font-preview'),
-            $logoPreview = $('.logo-preview');
+            $logoPreview = $('#font-logo-preview');
 
         //  init structs once, also clears current font
         FONT.initData();
diff --git a/src/tabs/osd.html b/src/tabs/osd.html
index 56672751..ba89c9ca 100644
--- a/src/tabs/osd.html
+++ b/src/tabs/osd.html
@@ -126,8 +126,8 @@
                         </div>
                         <h1 class="tab_title" i18n="osdSetupLogo" />
                         <div class="helpicon cf_tip" i18n_title="osdSetupReplaceLogoHelp"></div>                                                    
-                        <div class="content_wrapper" style="background:#00dd00; line-height: 0; margin-bottom:10px">
-                            <div class="logo-preview" style="background:#00ff00">
+                        <div id="font-logo-preview-container" class="content_wrapper">
+                            <div id="font-logo-preview">
                                 <!-- this will be resized at runtime -->
                             </div>
                         </div>