body{ background-color: rgb(41, 41, 41) } #homeTitle{ grid-area: pageTitle; color: whitesmoke; } .submitLand{ grid-area: submitButton; } .caerphillyBanner , .riscaBanner,.penarthBanner{ margin-top: 20px; background-color: darkslategrey; margin-bottom: 20px; border: solid 2px whitesmoke; /*border colour here at .banner and .bannertrail*/ border-right: none; } .caerphillyBannerTrail,.riscaBannerTrail,.penarthBannerTrail{ background-color: darkslategrey; margin-top: 20px; margin-bottom: 20px; border: solid 2px whitesmoke; border-left: none; text-align: center; } .penarthBannerTrail{ background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 40%); } .caerphillyBannerTrail{ margin-top: 20px; margin-bottom: 20px; border: solid 2px whitesmoke; border-left: none; background-image: linear-gradient(to right, darkslategrey , darkgoldenrod 30%); } .riscaBannerTrail{ background-image: linear-gradient(to right, darkslategrey , darkgoldenrod ); } .caerphillyBanner{ grid-area:townBannerC; background-image: url('/images/CaerphillyCastle.jpg'); /*// from cadw*/ background-size: 850px 200px; background-repeat: no-repeat; background-position: left 35%; color: inherit; text-decoration: none; /*filter: grayscale(30%);*/ } /*!*https://www.stayinwales.co.uk/wales_picture.cfm?p=4454*! Risca img*/ .riscaBanner { /* #caerUrl{*/ grid-area: townBannerR; background-image: url('/images/RiscaBanner.jpg'); background-size: 850px 200px; background-repeat: no-repeat; background-position: left 65%; color: inherit; text-decoration: none; } .penarthBanner { grid-area: townBannerP; background-image: url('/images/PenarthBanner.jpg'); background-size: 850px 200px; background-repeat: no-repeat; background-position: left 78%; color: inherit; text-decoration: none; } .caerphillyBannerTrail{ grid-area:townBannerDetsC; } .riscaBanner{ grid-area:townBannerR; } .riscaBannerTrail{ grid-area:townBannerDetsR; } .penarthBanner{ grid-area:townBannerP; } .penarthBannerTrail{ grid-area:townBannerDetsP; } #aboutUsFlavour{ grid-area: textFlavour; margin-top: 25px; margin-bottom: 15px; color: whitesmoke; } #trailCountCaer,#trailCountRisca,#trailCountPenarth{ flex:1; /*align-items: center;*/ /*justify-content: center;*/ } #trailProgressCaer,#trailProgressRisca,#trailProgressPenarth{ flex:2; align-content: center; } .gridContainer1{ display:grid; grid-template-columns: 10% 10% 60% 5% 5% 10%; grid-template-rows: auto; grid-template-areas: ". pageTitle pageTitle pageTitle pageTitle ." ". . . submitButton submitButton ." ". townBannerC townBannerC townBannerDetsC . ." ". townBannerR townBannerR townBannerDetsR . ." ". townBannerP townBannerP townBannerDetsP . ." " . . textFlavour . . ."; }