Center the background position of body / div to middle of Viewport
<p>I have a Body height of 1000px, and my screen height is 100px. I wanted to display a <code>&lt;div&gt;</code> that occupies the entire <code>&lt;body&gt;</code> width and <code>&lt;body&gt;</code> height. That <code>&lt;div&gt;</code> is having one <code>background-image</code> and I want to make it displayed at the middle of the viewport. How can I achieve this using Javascript.  </p>

<p>I have used the below concept but it did not work for me in mobile devices</p>

<pre><code>  ele.style.backgroundPosition = document.body.scrollTop + 
                                 (window.innerHeight / 2) - heightOfImage;
</code></pre>
