Frontpage header image using padding instead of margin

diff --git a/css/app.css b/css/app.css
index 2f1e289..1ecab34 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6852,6 +6852,11 @@ ul#sec-nav {
   z-index: 6 !important;
   display: none; }
 
+.hero-image-container {
+  width: 100%;
+  padding-bottom: 30%;
+  background: url("../assets/2-and-7.jpg"); }
+
 video {
   width: 100%;
   margin-bottom: 30px; }

diff --git a/front-page.php b/front-page.php
index c20e739..e112d19 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -5,15 +5,16 @@
 </div>
 <main class="page-front">
     <div id="content-wrapper">
+        <div class="hero-image">
+
+        </div>
         <div class="show-for-large-up">
-            <img src="<?php bloginfo('template_url'); ?>/assets/2-and-7.jpg">
             <!-- <video id="headerVideo" autoplay="" loop="" muted="">
                 <source src="<?php //bloginfo('template_url'); ?>/assets/videos/Header_Video_2.mp4">
                 <p>Your browser does not support HTML5 video.</p>
             </video> -->
         </div>
         <div class="show-for-medium-down">
-            <img src="<?php bloginfo('template_url'); ?>/assets/2-and-7.jpg">
             <!-- <video id="headerVideoMobile" autoplay="" loop="" muted="" controls="true">
                 <source src="<?php //bloginfo('template_url'); ?>/assets/videos/Header_Video_2_Mobile_Optimized.webm">
                 <source src="<?php //bloginfo('template_url'); ?>/assets/videos/Header_Video_2_Mobile_Optimized.m4v">

diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index 984adfb..fbc60a1 100644 (file)
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -213,6 +213,14 @@ ul#sec-nav {
 #ui-datepicker-div {
     z-index: 6 !important;
     display: none;
+}
+.hero-image-container {
+    width: 100%;
+    padding-bottom: 30%;
+    background: url("../assets/2-and-7.jpg");
+}
+.hero-image {
+
 }
 video {
     width: 100%;