Leaflet image zoom with layers

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {
    margin: 0;
  }
  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

</style>
</head>
<body>
  <div id="map"></div>

var w = 1000,
    h = 1000,
    background = 'https://darrenjaworski.com/images/background.jpg';

var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);

L.imageOverlay(background, bounds).addTo(map);

map.setMaxBounds(bounds);

var closures = 'https://darrenjaworski.com/images/closures.png';
var phase1 = 'https://darrenjaworski.com/images/phase1.png';
var phase2 = 'https://darrenjaworski.com/images/phase2.png';
var labels = 'https://darrenjaworski.com/images/labels.png';

var closuresLayer = L.imageOverlay(closures, bounds).addTo(map);
var phase1Layer = L.imageOverlay(phase1, bounds).addTo(map);
var phase2Layer = L.imageOverlay(phase2, bounds).addTo(map);
var labelLayer = L.imageOverlay(labels, bounds).addTo(map);

var layers = {
  "Closures": closuresLayer,
  "Phase 1": phase1Layer,
  "Phase 2": phase2Layer,
  "Labels": labelLayer
};

var baseMaps = {};

L.control.layers(baseMaps, layers).addTo(map);

</script>

Modified http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js