diff --git a/background.html b/background.html
index a06ad0abc..f6b554a17 100644
--- a/background.html
+++ b/background.html
@@ -100,7 +100,7 @@
         </div>
       </div>
     </div>
-    <div class='lightboxContainer'></div>
+    <div class='lightbox-container'></div>
   </script>
   <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
     <button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss
index 88ce10d66..52b9d1810 100644
--- a/stylesheets/_lightbox.scss
+++ b/stylesheets/_lightbox.scss
@@ -1,4 +1,4 @@
-.lightboxContainer {
+.lightbox-container {
   display: none;
   position: absolute;
   top: 0;
diff --git a/ts/backbone/views/Lightbox.ts b/ts/backbone/views/Lightbox.ts
index cb9ca054e..57226e747 100644
--- a/ts/backbone/views/Lightbox.ts
+++ b/ts/backbone/views/Lightbox.ts
@@ -3,10 +3,10 @@
  */
 export const show = (element: HTMLElement): void => {
   const container: HTMLDivElement | null = document.querySelector(
-    '.lightboxContainer'
+    '.lightbox-container'
   );
   if (container === null) {
-    throw new TypeError("'.lightboxContainer' is required");
+    throw new TypeError("'.lightbox-container' is required");
   }
   container.innerHTML = '';
   container.style.display = 'block';
@@ -15,7 +15,7 @@ export const show = (element: HTMLElement): void => {
 
 export const hide = (): void => {
   const container: HTMLDivElement | null = document.querySelector(
-    '.lightboxContainer'
+    '.lightbox-container'
   );
   if (container === null) {
     return;