re meta#300 fant beste løsning for bakgrunnsbilde

src/App.vue

@@ -5,9 +5,6 @@
       <h1><a :class="$vuetify.breakpoint.name" href="/">Ordbøkene</a></h1>
       <div class="beta">Beta</div>
       <p class="sub-title"><router-link to="/">Bokmålsordboka og Nynorskordboka</router-link></p>
-      <p class="description" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.mdAndUp && ! $route.name">
-          Skrivemåte og bøying i tråd med norsk rettskriving
-      </p>
     </header>
     <router-view></router-view>
     <footer>
@@ -80,14 +77,6 @@ p.about-link {
   float: right;
 }
 
-p.description {
-  font-size: 36px;
-  color: var(--v-primary-base);
-  background-color: var(--v-tertiary-base);
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-
 header > p {
   padding: 3px;
 }

src/components/DictionaryView.vue

 <template>
-  <main :class="(article || waiting || error || (search_results && search_results.length)) ? '' : 'welcome  '">
+  <main>
+    <p class="description" :class="$vuetify.breakpoint.name" v-if="$vuetify.breakpoint.mdAndUp && ! $route.name">
+        Skrivemåte og bøying i tråd med norsk rettskriving
+    </p>
     <div class="search_container">
       <div class="lang_select_container">
         <v-radio-group row v-model="lang">
@@ -35,7 +38,7 @@
     <div id="spinner" v-if="waiting">
       <v-progress-circular indeterminate color="secondary" size="120"></v-progress-circular>
     </div>
-    <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-if="! waiting" />
+    <SearchResults :hits="search_results" :lang="lang" @article-click="article_link_click" v-if="search_results.length && ! waiting" />
     <div id="single_article_container" v-if="article">
       <Article :key="article_key" :article="article" @article-click="article_link_click" />
     </div>
@@ -270,13 +273,14 @@ export default {
 main {
   flex: 1 0 auto;
   background-color: var(--v-tertiary-base);
+  display: flex;
+  flex-direction: column;
 }
 
-main.welcome {
+div.welcome {
   flex-grow: 10;
   background-image: url('../assets/books.jpg');
   background-repeat: no-repeat;
-  background-attachment: fixed;
 }
 
 .search_container {
@@ -285,7 +289,7 @@ main.welcome {
   padding-bottom: 10px;
 }
 
-#search_results, #spinner, #single_article_container, div.welcome, div.search_container, .error {
+#search_results, #spinner, #single_article_container, div.welcome, div.search_container, p.description, .error {
   padding-left: calc((100vw - 1000px) / 2);
   padding-right: calc((100vw - 1000px) / 2);
 }
@@ -294,6 +298,14 @@ main.welcome {
   padding-top: 40px;
 }
 
+p.description {
+  font-size: 36px;
+  color: var(--v-primary-base);
+  background-color: var(--v-tertiary-base);
+  padding-top: 40px;
+  padding-bottom: 10px;
+}
+
 div.monthly {
   padding: 20px;
   border-radius: 10px;