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");
+			}

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>