Removed dependency on javascript code to generate background images for headers on all pages (it generated too much network traffic and was needlesly complicated) - used a simple <picture> element with an absolute positioning for the page title and overlay in pseudo after element. All is now easily configurable from the css.

Tomasz-Kluczkowski · Tomasz-Kluczkowski · commit e5eaba87485a · 2018-03-08T11:34:51.000Z
Applied above to all existing pages.
Created necessary global styles for the above in style.scss.
Moved .page__title-container class to global styles at the top of styles.scss.
Removed unused javascript code from site.js.
Put that code into snippets.js - may be usefull one day.
diff --git a/_pages/01_about.html b/_pages/01_about.html
@@ -6,7 +6,7 @@
 
 <section class="about">
     <!--REPLACE THIS IMAGE WITH A NEW ONE - MIX PREVIOUS MEETUPS AND MAKE A COLLAGE -->
-    <div class="about__background-img" data-image-type="responsive">
+    <div class="about__background-img-container">
         <picture>
             <source srcset="../static/images/events_page/events_page_top_480x150px.jpg 480w,
                             ../static/images/events_page/events_page_top_960x300px.jpg 960w,
@@ -17,10 +17,9 @@
                             ../static/images/events_page/events_page_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class="responsive"
+            <img class=""
                  src="../static/images/events_page/events_page_top_960x300px.jpg"
-                 alt="Events"
-                 data-overlay="linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%)">
+                 alt="Events">
         </picture>
         <div class="about__page-title-container row container-fluid">
             <div class="col-sm-12">
diff --git a/_pages/03_events.html b/_pages/03_events.html
@@ -4,7 +4,7 @@
 permalink: /events/
 ---
 <section class="events-page">
-    <div class="events-page__background-img" data-image-type="responsive">
+    <div class="events-page__background-img-container" data-image-type="responsive">
         <picture>
             <source srcset="../static/images/events_page/events_page_top_480x150px.jpg 480w,
                             ../static/images/events_page/events_page_top_960x300px.jpg 960w,
@@ -15,7 +15,7 @@
                             ../static/images/events_page/events_page_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class="responsive"
+            <img class=""
                  src="../static/images/events_page/events_page_top_960x300px.jpg"
                  alt="Events"
                  data-overlay="linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.65) 100%)">
diff --git a/_pages/04_contact.html b/_pages/04_contact.html
@@ -4,7 +4,7 @@
 permalink: /contact/
 ---
 <section class="contact">
-    <div class="contact__background-img" data-image-type="responsive">
+    <div class="contact__background-img-container" data-image-type="responsive">
         <picture>
             <source srcset="../static/images/contact/contact_top_450x150px.jpg 450w,
                             ../static/images/contact/contact_top_960x300px.jpg 960w,
@@ -15,7 +15,7 @@
                             ../static/images/contact/contact_top_1650x1100px.jpg 1650w"
                     media="(orientation: portrait)"
                     sizes="100vw">
-            <img class="responsive"
+            <img class=""
                  src="../static/images/contact/contact_top_960x300px.jpg"
                  alt="Contact Us"
                  data-overlay="linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.75) 100%)">
diff --git a/_sass/about.scss b/_sass/about.scss
@@ -1,9 +1,16 @@
-.about__background-img {
-  @extend .contact__background-img;
+.about {
+  margin-top: -66px;
+}
+
+.about__background-img-container {
+  @extend .page__background-img-container;
+  &::after {
+    background: rgba(0, 0, 0, 0.65);
+  }
 }
 
 .about__page-title-container {
-  @extend .page__title-container
+  @extend .page__title-container;
 }
 
 .about__page-title {
diff --git a/_sass/contact.scss b/_sass/contact.scss
@@ -2,8 +2,11 @@
   margin-top: -66px;
 }
 
-.contact__background-img {
-  height: 55vh;
+.contact__background-img-container {
+  @extend .page__background-img-container;
+  &::after {
+    background: rgba(0, 0, 0, 0.65);
+  }
 }
 
 .contact__page-title-container {
diff --git a/_sass/events.scss b/_sass/events.scss
@@ -2,8 +2,11 @@
   margin-top: -66px;
 }
 
-.events-page__background-img {
-  @extend .contact__background-img
+.events-page__background-img-container {
+  @extend .page__background-img-container;
+  &::after {
+    background: rgba(0, 0, 0, 0.65);
+  }
 }
 
 .events-page__title-container {
diff --git a/_sass/style.scss b/_sass/style.scss
@@ -1,3 +1,5 @@
+//Global styles here.
+
 .body {
   background-color: $main-background;
   overflow-x: hidden;
@@ -36,6 +38,28 @@ a {
   padding-right: 15px;
 }
 
+.page__background-img-container {
+  position: relative;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
+
+.page__title-container {
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  -moz-transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
 /* Classes to change order of collapsed columns on mobiles*/
 @media (max-width: 767px) {
   .first-on-mobile {
@@ -59,25 +83,14 @@ a {
   }
 }
 
-/* Responsive background image handling*/
-[data-image-type="responsive"] {
-  background-size: cover;
-  background-position: center center;
-  background-repeat: no-repeat;
-  width: 100%;
-}
-
-[data-image-type="responsive"] .responsive {
-  display: none;
-}
-
 /*Here I need to move the background image to slide under the navigation*/
 /*Any smarter solutions are welcome!*/
 .navigation__content {
-  background-size: cover;
+  @extend .page__background-img-container;
   margin-top: -66px;
-  max-width: 100vw;
-  height: 101vh;
+  &::after {
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.8) 100%);
+  }
 }
 
 .navigation__brand {
diff --git a/_sass/typography.scss b/_sass/typography.scss
@@ -35,16 +35,6 @@
 // Text styles below.
 // Page title.
 
-.page__title-container {
-  position: relative;
-  top: 50%;
-  -moz-transform: translateY(-50%);
-  -webkit-transform: translateY(-50%);
-  -ms-transform: translateY(-50%);
-  transform: translateY(-50%);
-}
-
-
 .page__title, .page__subtitle {
   user-select: none;
   -moz-user-select: none;
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 ---
 {% include inline_style_index.html %}
 <!--Title image will be set to display:none and used as a background image on the div below-->
-<div class="navigation__content container-fluid" data-image-type="responsive">
+<div class="navigation__content container-fluid">
     <picture>
         <source srcset="static/images/title_photo/title_glass_building_480x270.jpg 480w,
                         static/images/title_photo/title_glass_building_960x540.jpg 960w,
@@ -20,13 +20,12 @@
                         static/images/title_photo/title_glass_building_1442x2562.jpg 1442w"
                 media="(orientation: portrait)"
                 sizes="100vw">
-        <img class="responsive"
+        <img class=""
              src="static/images/title_photo/title_glass_building_960x540.jpg"
-             alt="Python Sprints Title Image"
-             data-overlay="linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.8) 100%)">
+             alt="Python Sprints Title Image">
     </picture>
 
-    <div class="navigation__title-container row">
+    <div class="navigation__title-container row container-fluid">
         <div class="col-md-12">
             <h1 class="navigation__title">Python Sprints</h1>
             <h2 class="navigation__subtitle"><em>The World Needs Your Code</em></h2>
diff --git a/static/js/site.js b/static/js/site.js
@@ -15,12 +15,6 @@ $(document).ready(function () {
     navigationButtonClose.on("click", closeNav);
 });
 
-
-function readDeviceOrientation() {
-
-    return window.matchMedia("(orientation: portrait)").matches;
-}
-
 function stopBodyScrolling (bool) {
     /**
      * Required to stop body scrolling on iOS devices (safari ignores
@@ -73,45 +67,6 @@ function showCloseButton() {
     buttonCloseContainer.css("display", "inline");
 }
 
-// Responsive background image constructor.
-class ResponsiveBackgroundImage {
-
-    constructor(element) {
-        this.element = element;
-        this.img = element.querySelector('.responsive');
-        this.src = '';
-
-        this.img.addEventListener('load', () => {
-            this.update();
-        });
-
-        if (this.img.complete) {
-            this.update();
-        }
-    }
-
-    update() {
-        let src = typeof this.img.currentSrc !== 'undefined' ? this.img.currentSrc : this.img.src;
-        let image = this.img;
-        let overlay = image.getAttribute("data-overlay");
-        if (overlay === null || overlay === undefined) {
-            overlay = "";
-        }
-
-        if (this.src !== src) {
-            this.src = src;
-
-            this.element.style.backgroundImage = overlay + ', url("' + this.src + '")';
-        }
-    }
-}
-
-// Create responsive background images.
-let elements = document.querySelectorAll('[data-image-type="responsive"]');
-for (let i=0; i<elements.length; i++) {
-    new ResponsiveBackgroundImage(elements[i]);
-}
-
 // Add active class to navigation elements in the navigation overlay and
 // footer on page load.
 $(setActiveLink());
diff --git a/static/js/snippets.js b/static/js/snippets.js
@@ -0,0 +1,43 @@
+// Responsive background image constructor.
+class ResponsiveBackgroundImage {
+
+    constructor(element) {
+        this.element = element;
+        this.img = element.querySelector('.responsive');
+        this.src = '';
+
+        this.img.addEventListener('load', () => {
+            this.update();
+        });
+
+        if (this.img.complete) {
+            this.update();
+        }
+    }
+
+    update() {
+        let src = typeof this.img.currentSrc !== 'undefined' ? this.img.currentSrc : this.img.src;
+        let image = this.img;
+        let overlay = image.getAttribute("data-overlay");
+        if (overlay === null || overlay === undefined) {
+            overlay = "";
+        }
+
+        if (this.src !== src) {
+            this.src = src;
+
+            this.element.style.backgroundImage = overlay + ', url("' + this.src + '")';
+        }
+    }
+}
+
+// Create responsive background images.
+let elements = document.querySelectorAll('[data-image-type="responsive"]');
+for (let i=0; i<elements.length; i++) {
+    new ResponsiveBackgroundImage(elements[i]);
+}
+
+function readDeviceOrientation() {
+
+    return window.matchMedia("(orientation: portrait)").matches;
+}

Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,11 @@`
`2`	`2`	`margin-top: -66px;`
`3`	`3`	`}`
`4`	`4`
`5`		`-.contact__background-img {`
`6`		`- height: 55vh;`
	`5`	`+.contact__background-img-container {`
	`6`	`+ @extend .page__background-img-container;`
	`7`	`+ &::after {`
	`8`	`+ background: rgba(0, 0, 0, 0.65);`
	`9`	`+ }`
`7`	`10`	`}`
`8`	`11`
`9`	`12`	`.contact__page-title-container {`
Original file line number	Diff line number	Diff line change
`@@ -2,8 +2,11 @@`
`2`	`2`	`margin-top: -66px;`
`3`	`3`	`}`
`4`	`4`
`5`		`-.events-page__background-img {`
`6`		`- @extend .contact__background-img`
	`5`	`+.events-page__background-img-container {`
	`6`	`+ @extend .page__background-img-container;`
	`7`	`+ &::after {`
	`8`	`+ background: rgba(0, 0, 0, 0.65);`
	`9`	`+ }`
`7`	`10`	`}`
`8`	`11`
`9`	`12`	`.events-page__title-container {`