Slash overlay banner - v2

from bcc

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/22271E/assets/css/sfx.min.css">
<link rel="stylesheet" href="https://www.screwfix.com/images/general/assets/css/slash-banner-overlay.css">
<div class="cat-image-landscaping_chainsaws_l2 slash">

  <a href="//www.screwfix.com/c/outdoor-gardening/chainsaws/cat840736" class="banner banner--var1" title="From £49 .99Chainsaws">
    <div class="banner__wrapper" style="background: url(//www.screwfix.com/images/CAT136/assets/gfx/lvl2_landscaping_719FG_bg.jpg) no-repeat">

      <div class="banner__content-wrapper">
        <div class="banner__content">
          <p class="banner__deal">

            <span class="banner__deal-text">
						                 		   From
						                 	</span>


            <span class="banner__deal-value">
					                	
					                							<sup>£</sup>49<sup>.99</sup>
					                						
					                </span>
          </p>
          <p class="banner__text">
            <span>Chainsaws</span>
            <span></span>
            <span></span>
          </p>

        </div>

      </div>
      <div class="banner__img-align">
        <img src="" alt="" class="banner__img swap" data-src-small="" data-src-medium="" data-src-large="" data-alt="">
      </div>

    </div>
  </a>

</div>

CSS

/*  mobile - overlay + banner__wrapper background position */
@media (max-width: 640px) {
    .cat-image-landscaping_chainsaws_l2.slash .banner__wrapper {background: none !important}
    .cat-image-landscaping_chainsaws_l2.slash .banner__bg-overlay {background-position: 107% !important}
}

/* tablet - overlay + banner__wrapper background position + tablet background */
@media (min-width: 641px) and (max-width: 1024px) {
  .cat-image-landscaping_chainsaws_l2.slash .banner__wrapper {background: url(//www.screwfix.com/images/CAT136/assets/gfx/lvl2_landscaping_719FG_md_bg.jpg) no-repeat !important}

  .cat-image-landscaping_chainsaws_l2.slash .banner__wrapper,
  .cat-image-landscaping_chainsaws_l2.slash .banner__bg-overlay {
     background-position: 25% !important;
  }
}

/* desktop - overlay + banner__wrapper background position */
@media (min-width: 1025px) {
  .cat-image-landscaping_chainsaws_l2.slash .banner__wrapper,
  .cat-image-landscaping_chainsaws_l2.slash .banner__bg-overlay {background-position: 30% !important}
}

JavaScript

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

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

// the html that we want to add to the banner 
var chainsawOverlayContent = '<div class="banner__bg-overlay swap-bg-cutout-img" data-src-small="//www.screwfix.com/images/CAT136/assets/gfx/lvl2_landscaping_719FG_sm.png" data-src-medium="//www.screwfix.com/images/CAT136/assets/gfx/lvl2_landscaping_719FG_md.png" data-src-large="//www.screwfix.com/images/CAT136/assets/gfx/lvl2_landscaping_719FG_lg.png" src="//www.screwfix.com/images/CAT136/assets/gfx/lvl2_landscaping_719FG_lg.png"></div>';

// choose where to add your html from above
$(".cat-image-landscaping_chainsaws_l2 .banner__wrapper").prepend(chainsawOverlayContent);

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


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

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

  imgs.each(function() {

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

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

// call main function on page load
swapBgCutoutImg();


// call main...