Driving me nuts! Overlaying a transparent SVG/PNG file on top of background

HTML & CSS
, ,
1

Here is the link of how it looks currently:
http://cubicfoundations.com

What I am trying to achieve:

http://cubicfoundations.com/SCREENSHOT.png

The gradient div acts as a background. The SVG image (logo div) should overlay the gradient div with a full-width-and-height white background, showing the gradient colors through the transparent parts of the logo.

How do I achieve this? Driving me nuts!

Any fixes/ideas greatly appreciated!

HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Cubic Foundations</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
  <script src="js/index.js"></script>
</head>

<body>
  <div id="gradient">
  <div id="logo">
  </div>
  </div>
</body>

</html>

CSS:

body {
  padding: 0px;
  margin: 0px;
  background-color: #FFFFFF;
}
#gradient {
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  position: absolute;
  z-index: -99999;
}
#logo {
  width: 100%;
  height: 100%;
  background: url(cubic-logo-ws.svg) center center no-repeat;
}