background image swap custom - full versions - position overlay with cut out image over background - chainsaws

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<div class="home-page">




<main id="container-main" class="wrp">
<div class="inner">
<div class="cat-image-landscaping_chainsaws_l2 slash">
			
				<a href="" class="banner banner--freetype banner--var1" title="">
					<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__title">
									<span class="banner__text--large">New</span>
									<span class="banner__text--small"></span>
									<span class="banner__text--small"></span>
								</p>	
								<p class="banner__text">
									<span>LAP 3.1A USB Sockets </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><div class="lg-12 md-24 sm-24 cat-image-landscaping_chainsaws_l2 slash">
			
				<a href="" class="banner banner--freetype banner--var1 banner--half" title="">
					<div class="banner__wrapper" style="background: url(http://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__title">
									<span class="banner__text--large">New</span>
									<span class="banner__text--small"></span>
									<span class="banner__text--small"></span>
								</p>	
								<p class="banner__text">
									<span>LAP 3.1A USB Sockets </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=""...

CSS

.slash .banner__bg-overlay {
  background-repeat: no-repeat;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


/*  mobile - overlay + banner__wrapper background position */
.cat-image-landscaping_chainsaws_l2.slash .banner__wrapper,
.cat-image-landscaping_chainsaws_l2.slash .banner__bg-overlay {
    background-position: 32% !important;
}

/* tablet - overlay + banner__wrapper background position */
@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;
  }
}

/* half banner overlay + background on tablet */
@media (min-width: 641px) {
  .cat-image-landscaping_chainsaws_l2.slash .banner--half .banner__wrapper,
  .cat-image-landscaping_chainsaws_l2.slash .banner--half .banner__bg-overlay {
    background-position: calc(0% + 250px) !important;
  }
}

/* half banner overlay + background on desktop */
@media (min-width: 1025px) {
  .cat-image-landscaping_chainsaws_l2.slash .banner--half .banner__wrapper,
  .cat-image-landscaping_chainsaws_l2.slash .banner--half .banner__bg-overlay {
    background-position: calc(100% + 384px) !important;
  }
}



/* base class of red slash angle  */
.slash .banner__content-wrapper:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -105px !important;
  border-top: 0 !important;
  border-bottom: 356px solid transparent !important;
...

JavaScript

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

// this script is for swapping background images in a div above another background image. 
// You would use this to position a cut out product on top of the new css 'slash' angle


// 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 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>';

var socketsOverlayContent = '<div class="banner__bg-overlay swap-bg-cutout-img" data-src-small="http://www.screwfix.com/images/CAT127/assets/gfx/hp-cat127-hero-usbsockets_sm-cutout.png" data-src-medium="http://www.screwfix.com/images/CAT127/assets/gfx/hp-cat127-hero-usbsockets_lg-cutout.png" data-src-large="http://www.screwfix.com/images/CAT127/assets/gfx/hp-cat127-hero-usbsockets_lg-cutout.png" src="http://www.screwfix.com/images/CAT127/assets/gfx/hp-cat127-hero-usbsockets_lg-cutout.png"></div>';

// choose where to add your meaty chunks of html from above
$(".cat-image-landscaping_chainsaws_l2 .banner__wrapper").prepend(chainsawOverlayContent);
$(".hero-hpusbsockets .banner__wrapper").prepend(socketsOverlayContent);

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



// this is the bit that swaps background images - which you can...