banner overlay

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<link rel="stylesheet" href="https://www.screwfix.com/images/general/assets/css/brand/erbauer-brand-subcat.css">
<main id="container-main" class="wrp">
  <div class="inner">






    <div class="full_width_banner main-header">
      <div class="row">
        <div class="lg-24 md-24 sm-24">
          <div class="mn_head">
            <img src="//www.screwfix.com/images/general/assets/gfx/erbauer-logo.png" alt="Erbauer Logo" class="ErbauerLogo">
          </div>
          <div class="bg-logo"></div>
          <div class="full_width_wrp" style="width: 1666px; left: -295px;">
            <div class="Erbauer_powertoolaccessories banner-mg-wrap">

              <div class="banner__bg-overlay swap-bg-cutout-img" data-src="" small="//www.screwfix.com/images/general/assets/gfx/erbauer_powertoolaccessories_header-cutout_md.png" data-src-medium="//www.screwfix.com/images/general/assets/gfx/erbauer_powertoolaccessories_header-cutout_md.png"
                data-src-large="//www.screwfix.com/images/general/assets/gfx/erbauer_powertoolaccessories_header-cutout_lg.png" src="//www.screwfix.com/images/general/assets/gfx/erbauer_powertoolaccessories_header-cutout_lg.png"></div>

            </div>

          </div>
        </div>
      </div>
    </div>








  </div>
</main>

CSS

/*  mobile - overlay + banner-mg-wrap background position */

@media (max-width: 640px) {
  .Erbauer_powertoolaccessories .banner__bg-overlay {
    background-position: 0% !important;
  }
}

/* tablet - overlay + banner-mg-wrap background position + tablet background */

@media (min-width: 641px) and (max-width: 1024px) {
  .Erbauer_powertoolaccessories .banner__bg-overlay {
    background-position: 100% !important;
  }
}

/* desktop - overlay + banner-mg-wrap background position */

@media (min-width: 1025px) {
  .Erbauer_powertoolaccessories .banner__bg-overlay {
    background-position: 67% !important;
  }
}

JavaScript

//document.addEventListener("DOMContentLoaded", function() {

// ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ start of editable javascript ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

// the html that we want to add to the banner - we can duplicate this and change the variable name if there are more than one banner
var bannerOverlayContentTaps = '<div class="banner__bg-overlay swap-bg-cutout-img" data-src="" small="//www.screwfix.com/images/general/assets/gfx/erbauer_powertoolaccessories_header-cutout_md.png" data-src-medium="//www.screwfix.com/images/general/assets/gfx/erbauer_powertoolaccessories_header-cutout_md.png" data-src-large="//www.screwfix.com/images/general/assets/gfx/erbauer_powertoolaccessories_header-cutout_lg.png" src="//www.screwfix.com/images/general/assets/gfx/erbauer_powertoolaccessories_header-cutout_lg.png"></div>';

// choose where to add your meaty chunks of html from above
jQuery(".cat-image-kitchen_20offtaps_l2 .banner__wrapper").prepend(bannerOverlayContentTaps);

// ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ end of editable javascript ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

// this is the bit that swaps background images - which you can leave alone
var swapBgCutoutImg = function() {

  var imgs = jQuery('.swap-bg-cutout-img');
  var bw = window.innerWidth;

  imgs.each(function() {

    var imgNameSmall = jQuery(this).data('src-small');
    var imgNameMedium = jQuery(this).data('src-medium');
    var imgNameLarge = jQuery(this).data('src-large');

    if (bw <= 640) {
      if (imgNameSmall) {
        jQuery(this).css('background-image', 'url(' + imgNameSmall + ')');
      } else if (imgNameMedium) {
        jQuery(this).css('background-image', 'url(' + imgNameMedium + ')');
      } else {
        jQuery(this).css('background-image', 'url(' + imgNameLarge + ')');
      }
    } else if (bw > 640 && bw < 1025) {
      if (imgNameMedium) {
        jQuery(this).css('background-image', 'url(' + imgNameMedium + ')');
      } else {
       ...