Further work attempting to get a greyscale image to function as a progress...

Further work attempting to get a greyscale image to function as a progress meter on the Caerphilly banner

src/main/resources/templates/towns/home/homePage.html

@@ -34,9 +34,19 @@
 
         .caerphillyBanner{
             grid-area:townBannerC;
+            background-image: url('CaerphillyCastle.jpg');
+            background-size: 800px 200px;
+            background-repeat: no-repeat;
+            background-position: left 35%;
+            background-image: url('CaerphillyCastle.jpg');
+            /*filter: grayscale(30%);*/
         }
+        /*body{*/
+        /*    background-image: url('CaerphillyCastle.jpg');*/
+        /*}*/
         .caerphillyBannerTrail{
             grid-area:townBannerDetsC;
+            /*linear-gradient(90 deg,white,red);*/
         }
         .riscaBanner{
             grid-area:townBannerR;
@@ -92,7 +102,7 @@
 <!--<header th:insert="~{../Templating.html::header}"></header>-->
 <main>
 <div class="gridContainer1">
-    <H1 id="homeTitle"> Smart Towns - Trails</H1>
+    <H1 id="homeTitle"> VZTA Smart Towns - Trails</H1>
     <button class="submitLand"> Submit Landmark!</button>
 
 
@@ -102,7 +112,7 @@
 
     <div class="caerphillyBannerTrail">
         <div id="trailCountCaer"> Trails: 3</div>
-        <div id="trailProgressCaer"> 55%</div>
+        <div id="trailProgressCaer"> 70%</div>
     </div>
 
     <div class="riscaBanner">