full Background image Mouse Move Coverage

Question

I have a small script to tilt the background image when mouse is moving. I have tried 3 different images and no matter what size they are there is a white gap when the image moves.

the background image follows the mouse without issue. is just shows white gaps , I have tried setting the image in every what to no avail.

$(function() {
  // Init
  var container = document.getElementById("container"),
    inner = document.getElementById("inner");
  // Mouse
  var mouse = {
    _x: 0,
    _y: 0,
    x: 0,
    y: 0,
    updatePosition: function(event) {
      var e = event || window.event;
      this.x = e.clientX - this._x;
      this.y = (e.clientY - this._y) * -1;
    },
    setOrigin: function(e) {
      this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
      this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
    },
    show: function() {
      return "(" + this.x + ", " + this.y + ")";
    }
  };
  // Track the mouse position relative to the center of the container.
  mouse.setOrigin(container);
  //-----------------------------------------
  var counter = 0;
  var updateRate = 10;
  var isTimeToUpdate = function() {
    return counter++ % updateRate === 0;
  };
  //-----------------------------------------
  var onMouseEnterHandler = function(event) {
    update(event);
  };
  var onMouseLeaveHandler = function() {
    inner.style = "";
  };
  var onMouseMoveHandler = function(event) {
    if (isTimeToUpdate()) {
      update(event);
    }
  };
  //-----------------------------------------
  var update = function(event) {
    mouse.updatePosition(event);
    updateTransformStyle(
      (mouse.y / inner.offsetHeight / 2).toFixed(2),
      (mouse.x / inner.offsetWidth / 2).toFixed(2)
    );
  };
  var updateTransformStyle = function(x, y) {
    var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
    inner.style.transform = style;
    inner.style.webkitTransform = style;
    inner.style.mozTransform = style;
    inner.style.msTransform = style;
    inner.style.oTransform = style;
  };
  //-----------------------------------------
  container.onmouseenter = onMouseEnterHandler;
  container.onmouseleave = onMouseLeaveHandler;
  container.onmousemove = onMouseMoveHandler;
});

body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}


.container {
  position: relative;
  overflow: hidden;
  -webkit-perspective: 50px;
  perspective: 50px;
}


.inner {
  position: static;
  display: block;
  width: 100%;
  height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-image: url('https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="container">
    <div id="inner" class="inner"></div>
</div>

Answer 1

Resizing the background picture won't help. Those gaps are caused by how your div.inner is rotated. Here is a simple graphical explanation:

Possible solutions:

1. Scale div when rotated. You'll need to scale by (1 / cos(rotation_angle)). But that is not very good approach. It will not look nice enough.

2. Scale div.inner once depending on maximum possible angle of rotation. Don't forget to shift it to the desired position with negative margins or position: absolute.

Here is an example of how it works, based on your code. Note, that it is not full working code, I just modified width and margin. To get exactly what you want you need to set scale and positioning by yourself.

$(function() {
  // Init
  var container = document.getElementById("container"),
    inner = document.getElementById("inner");
  // Mouse
  var mouse = {
    _x: 0,
    _y: 0,
    x: 0,
    y: 0,
    updatePosition: function(event) {
      var e = event || window.event;
      this.x = e.clientX - this._x;
      this.y = (e.clientY - this._y) * -1;
    },
    setOrigin: function(e) {
      this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
      this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
    },
    show: function() {
      return "(" + this.x + ", " + this.y + ")";
    }
  };
  // Track the mouse position relative to the center of the container.
  mouse.setOrigin(container);
  //-----------------------------------------
  var counter = 0;
  var updateRate = 10;
  var isTimeToUpdate = function() {
    return counter++ % updateRate === 0;
  };
  //-----------------------------------------
  var onMouseEnterHandler = function(event) {
    update(event);
  };
  var onMouseLeaveHandler = function() {
    inner.style = "";
  };
  var onMouseMoveHandler = function(event) {
    if (isTimeToUpdate()) {
      update(event);
    }
  };
  //-----------------------------------------
  var update = function(event) {
    mouse.updatePosition(event);
    updateTransformStyle(
      (mouse.y / inner.offsetHeight / 2).toFixed(2),
      (mouse.x / inner.offsetWidth / 2).toFixed(2)
    );
  };
  var updateTransformStyle = function(x, y) {
    var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
    inner.style.transform = style;
    inner.style.webkitTransform = style;
    inner.style.mozTransform = style;
    inner.style.msTransform = style;
    inner.style.oTransform = style;
  };
  //-----------------------------------------
  container.onmouseenter = onMouseEnterHandler;
  container.onmouseleave = onMouseLeaveHandler;
  container.onmousemove = onMouseMoveHandler;
});

body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}


.container {
  position: relative;
  overflow: hidden;
  -webkit-perspective: 50px;
  perspective: 50px;
}


.inner {
  position: static;
  display: block;
  width: 130%; margin-left: -40px;
  height: 100vh;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-image: url('https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="container">
    <div id="inner" class="inner"></div>
</div>

Answer 2

Your code updated from @Xufox's comments:

$(function() {
  // Init
  var container = document.getElementById("container"),
    inner = document.getElementById("inner");
  // Mouse
  var mouse = {
    _x: 0,
    _y: 0,
    x: 0,
    y: 0,
    updatePosition: function(event) {
      var e = event || window.event;
      this.x = e.clientX - this._x;
      this.y = (e.clientY - this._y) * -1;
    },
    setOrigin: function(e) {
      this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
      this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
    },
    show: function() {
      return "(" + this.x + ", " + this.y + ")";
    }
  };
  // Track the mouse position relative to the center of the container.
  mouse.setOrigin(container);
  //-----------------------------------------
  var counter = 0;
  var updateRate = 10;
  var isTimeToUpdate = function() {
    return counter++ % updateRate === 0;
  };
  //-----------------------------------------
  var onMouseEnterHandler = function(event) {
    update(event);
  };
  var onMouseLeaveHandler = function() {
    inner.style = "";
  };
  var onMouseMoveHandler = function(event) {
    if (isTimeToUpdate()) {
      update(event);
    }
  };
  //-----------------------------------------
  var update = function(event) {
    mouse.updatePosition(event);
    updateTransformStyle(
      (mouse.y / inner.offsetHeight / 2).toFixed(2),
      (mouse.x / inner.offsetWidth / 2).toFixed(2)
    );
  };
  var updateTransformStyle = function(x, y) {
    var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
    inner.style.transform = style;
    inner.style.webkitTransform = style;
    inner.style.mozTransform = style;
    inner.style.msTransform = style;
    inner.style.oTransform = style;
  };
  //-----------------------------------------
  container.onmouseenter = onMouseEnterHandler;
  container.onmouseleave = onMouseLeaveHandler;
  container.onmousemove = onMouseMoveHandler;
});

html, body {margin:0 ;padding:0}

body {
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  color: #333;
  font-size: 14px;
  line-height: 20px;
}


.container {
  position: relative;
  overflow: hidden;
  -webkit-perspective: 50px;
  perspective: 50px;
}


.inner {
  position: static;
  display: block;

  width: 120vw;
  height: 120vh;
  margin:-10vh 0 0 -10vw;
  transition:.5s;


  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-image: url('https://www.planwallpaper.com/static/images/6909249-black-hd-background.jpg');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
  bbackground-attachment: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="container">
    <div id="inner" class="inner"></div>
</div>