src/components/home/contentAuth.vue

@@ -10,7 +10,7 @@
 		>
 			<div
 				:class="{'is-visible': background}"
-				class="app-container-background"
+				class="app-container-background background-fade-in"
 				:style="{'background-image': background && `url(${background})`}"></div>
 			<navigation/>
 			<div

src/components/list/partials/list-card.vue

@@ -12,9 +12,10 @@
 		class="list-card"
 		v-if="list !== null && (showArchived ? true : !list.isArchived)"
 	>
-		<div v-if="background !== null"
-			 class="list-background"
-			 :style="{'background-image': background !== null ? `url(${background})` : false}"></div>
+		<div
+			class="list-background background-fade-in"
+			:class="{'is-visible': background}"
+			:style="{'background-image': background !== null ? `url(${background})` : false}"></div>
 		<div class="list-content">
 			<div class="is-archived-container">
 			<span class="is-archived" v-if="list.isArchived">

src/styles/theme/background.scss

@@ -43,6 +43,9 @@
   height: 100vh;
   position: fixed;
   z-index: 0;
+}
+
+.background-fade-in {
   opacity: 0;
   transition: opacity $transition;
   transition-delay: $transition-duration * 2; // To fake an appearing background