From e0ae65304d42cf2c95ebe9f7090450cdf989f4e3 Mon Sep 17 00:00:00 2001
From: Hyperling <me@hyperling.com>
Date: Tue, 14 Oct 2025 06:00:26 -0700
Subject: [PATCH] Get the banner images to play MUCH better thanks to midnight
 epiphany of using `background`. :)

---
 pages/helpers/banner.css | 14 +++++++++++++-
 pages/helpers/banner.php | 25 ++++++++++++++++---------
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/pages/helpers/banner.css b/pages/helpers/banner.css
index 85fd73f..42b1b73 100644
--- a/pages/helpers/banner.css
+++ b/pages/helpers/banner.css
@@ -4,7 +4,7 @@
 			.banner-top, .banner-middle, .banner-bottom {
 				color: white;
 				width: 100%;
-				/* height: 69px; TBD/TODO: Still testing this removal. */
+				height: 69px;
 				font-size: 50px;
 				text-align: center;
 			}
@@ -21,3 +21,15 @@
 			.banner-bottom {
 				background-color: #33CC33;
 			}
+
+			.banner-image {
+				background-position: center, center;
+				background-repeat: no-repeat;
+				height: 237px; /* 69*3[banner] + 15*2[padding] */
+			}
+			.banner-image01 {
+				background-image: url("/files/media/icons/home.jpg");
+			}
+			.banner-image02 {
+				background-image: url("/files/media/icons/contact.jpg");
+			}
diff --git a/pages/helpers/banner.php b/pages/helpers/banner.php
index 3e79f69..5833a67 100755
--- a/pages/helpers/banner.php
+++ b/pages/helpers/banner.php
@@ -6,25 +6,32 @@
 	}
 	$show_pics = $GLOBALS["SHOW_BANNER_PICS"];
 	$banner_width = $show_pics ? 6 : 12;
+
+	// TBD / TODO:
+	// Check if user has vertical screen?
+	// Is that possible in this environment?
+	//$image_width = $vertical_screen ? 6 : 3;
 ?>
 		<a href='/about/'>
+			<div class="row">
 			<?php if ($show_pics) echo '
-			<div class="row col-3 header center">
-				<img src="/files/media/icons/home.jpg"
-					alt="<<banner01.jpg>>" style="width:100%"
-				>
+			<div class="col-3 header center banner-image banner-image01">
+				<!-<img src="/files/media/icons/home.jpg"
+					alt="<<banner01.jpg>>"
+				>-->
 			</div>
 			';?>
-			<div class="row col-<?php echo "$banner_width"; ?> header">
+			<div class="col-<?php echo "$banner_width"; ?> header">
 				<div class="banner-top">Peace</div>
 				<div class="banner-middle">Love</div>
 				<div class="banner-bottom">Happiness</div>
 			</div>
 			<?php if ($show_pics) echo '
-			<div class="row col-3 header center">
-				<img src="/files/media/icons/contact.jpg"
-					alt="<<banner02.jpg>>" style="width:100%"
-				>
+			<div class="col-3 header center banner-image banner-image02">
+				<!--<img src="/files/media/icons/contact.jpg"
+					alt="<<banner02.jpg>>"
+				>-->
 			</div>
 			';?>
+			</div>
 		</a>