JSFiddle - React, Tailwind, and code Playground

HTML

<html style="background-image: url('http://www.bittbox.com/wp-content/uploads/2007/02/vector_perforated_metal_pattern.png')">
    <body>
        <div class='container'>
          <script type='text/javascript'>
              $(document).ready(function() {
                blendHeader();
              });
          </script>
        <div id="header">
            <canvas id="header-image-canvas"></canvas>
            <canvas id="header-color-canvas"></canvas>
        </div>
        </div>
    </body>
</html>

CSS

html {
  background: no-repeat top left fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }

body {
  font-family: Helvetica-neue-47, "Helvetica-Light";
  font-size: 12pt;
  text-align: center;
  color: #FFFFFF; }

.container {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  text-align: left; }

#header {
  width: 100%;
  height: 192px; }
  #header #header-content {
    width: 1024px;
    font-size: 10pt;
    margin: 0 auto; }
#header-color-canvas {
  position: absolute;
  width: 100%;
  height: 192px;
  top: -192px;
  z-index: -2; }

#header-image-canvas {
  position: absolute;
  width: 100%;
  height: 192px;
  top: 0px;
  z-index: -1; }

JavaScript

function crop(imageObj, imageCanvas, colorCanvas) {
    var magicConstant = 1.286;
    var iHeight = window.innerWidth * imageObj.height / imageObj.width;
    var cHeight = 192 * imageObj.height / iHeight;
        
    //cHeight *= magicConstant;
    imageCanvas.drawImage(imageObj, 0, 0, imageObj.width, cHeight, 0, 0, window.innerWidth, 192);
}

function doBlending() {
    var height = 192;

    var colorCanvas = document.getElementById("header-color-canvas").getContext("2d");
    var imageCanvas = document.getElementById("header-image-canvas").getContext("2d");

    colorCanvas.canvas.width = window.innerWidth;
    imageCanvas.canvas.width = window.innerWidth;

    colorCanvas.rect(0, 0, window.innerWidth, height);
    colorCanvas.fillStyle = "#F6AE00";
    colorCanvas.fill();
    colorCanvas.lineWidth = 0;

    var imageObj = new Image();
    imageObj.onload = function(){
        crop(imageObj, imageCanvas, colorCanvas);
    };
    imageObj.src = $('html').css('background-image').replace(/^url|[\(\)]/g, '');
}
        
function blendHeader() {      
    $('<img>').attr('src',function(){
        var imgUrl = $('html').css('background-image');
        imgUrl = imgUrl .substring(4, imgUrl .length-1);
        return imgUrl;
    }).load(function(){
        doBlending();
    });
}