How to fix the cloud?

Question

I have a cloud image that should grow when the user scrolls down, but it is cropped from below and therefore looks ugly. The image itself is good. It seems to me that I should somehow change the CSS. How can i fix this?

Here's the codepen sandbox.

HTML

<canvas id="canvas"></canvas>
<div class="front" id="front">
  <div class="cloud">
    <div class="scroll-arrows">
      SCROLL TO MOVE THE CLOUD
    </div>
  </div>
</div>

CSS

body {
  height: 1000vh;
  margin: 0;
}

canvas {
  width: 100%;
  height: 100vh;
  position: fixed;
}

.front {
  text-align: center;
  background: url("https://res.cloudinary.com/active-bridge/image/upload/v1448008261/cloud.png") no-repeat 50% 50%/cover;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 14px;
  z-index: 1;
  line-height: 100vh;
}

.front .cloud {
  display: inline-block;
  width: 40%;
  line-height: 1;
  vertical-align: middle;
}

Js

front = document.getElementById('front');

var timeOut;
window.onresize = function() {
  if(timeOut)
    clearTimeout(timeOut);
  timeOut = setTimeout(draw, 10);
}

window.onload = draw;
window.onscroll = navigate;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

forest = new Image;
forest.src = 'http://p1.pichost.me/i/33/1561150.jpg';

function navigate() { draw() }

function draw(scroll) {
  scroll = (window.scrollY || window.pageYOffset) / (document.body.clientHeight - window.innerHeight) * 3000;
  canvas.setAttribute('width', window.innerWidth);
  canvas.setAttribute('height', window.innerHeight);


drawImageProp(ctx, forest, 0, (-scroll*3.9)/4, canvas.width, canvas.height + (scroll*3.9)/2);

}

function drawImageProp(ctx, img, x, y, w, h, offsetX, offsetY) {

    if (arguments.length === 2) {
        x = y = 0;
        w = ctx.canvas.width;
        h = ctx.canvas.height;
    }

    // default offset is center
    offsetX = typeof offsetX === "number" ? offsetX : 0.5;
    offsetY = typeof offsetY === "number" ? offsetY : 0.5;

    // keep bounds [0.0, 1.0]
    if (offsetX < 0) offsetX = 0;
    if (offsetY < 0) offsetY = 0;
    if (offsetX > 1) offsetX = 1;
    if (offsetY > 1) offsetY = 1;


    var iw = img.width,
        ih = img.height,
        r = Math.min(w / iw, h / ih),
        nw = iw * r,   // new prop. width
        nh = ih * r,   // new prop. height
        cx, cy, cw, ch, ar = 1;

    // decide which gap to fill
    if (nw < w) ar = w / nw;
    if (nh < h) ar = h / nh;
    nw *= ar;
    nh *= ar;

    // calc source rectangle
    cw = iw / (nw / w);
    ch = ih / (nh / h);

    cx = (iw - cw) * offsetX;
    cy = (ih - ch) * offsetY;

    // make sure source rectangle is valid
    if (cx < 0) cx = 0;
    if (cy < 0) cy = 0;
    if (cw > iw) cw = iw;
    if (ch > ih) ch = ih;

    // fill image in dest. rectangle
    ctx.drawImage(img, cx, cy, cw, ch, x, y, w, h);

}

Answer 1

Giving the .frontdiv a given height, fixed the problem that itposition:absolute

code

.front {
  text-align: center;
  background: url("https://res.cloudinary.com/active-bridge/image/upload/v1448008261/cloud.png") no-repeat 50% 50%/cover;
  pointer-events: none;
  height: 850px;
  position: relative;
  font-size: 14px;
  z-index: 1;
  line-height: 100vh;
}

Example