title: Sliced background image with fixed positioning
body: <p>This is my first question so I'm probably gonna miss something. Please tell me if you need any additional information.</p>
  
  <p>I am trying to create a sliced image overlaying another image and when you hover any of the slices it will disappear and show the underlying picture. What I've done is that I have created several divs that represents each slice and then used a fixed background position so the overlaying image looks whole. </p>
  
  <p>I've made the concept work, but I'm having some trouble adjusting the positioning of the overlaying picture. Since I'm using fixed background positioning the overlaying picture doesn't work in a responsive environment, that is if I don't position the image in the top left corner. But if I remove the fixed positioning I haven't been able to create a seamless sliced picture.</p>
  
  <p>Can this be solved or am I approaching this problem the wrong way entirely? Thanks for your help!</p>
  
  <p>Here is a codepen of what I've done <a href="https://codepen.io/renryl/pen/MzJjpd" rel="nofollow noreferrer">https://codepen.io/renryl/pen/MzJjpd</a>.</p>
  
  <pre><code>body {
    margin-left: 50px;
  }
  
  $itemWidth: 20px;
  $foreground-image: 'https://i.warosu.org/data/biz/img/0022/15/1495964000552.jpg';
  $background-image: 'https://vignette.wikia.nocookie.net/wiiu/images/5/5e/New-Super-Mario-Bros-Art-21-400x400.jpg/revision/latest?cb=20121029024830';
  
  .background-picture {
    max-width: 400px;
    height: 400px;
    overflow: hidden;
    background: rgba(#424242,.5) url($background-image) no-repeat;
    border-radius: 50%;
  }
  
  .foreground-picture {
    width: $itemWidth;
    height: 100%;
    display: inline-block;
    transition: all 1.5s ease-in-out;
    background: rgba(#424242,.5) url($foreground-image) no-repeat fixed;
  
    &amp;:hover{
      transition: all 0s linear;
      opacity:0;
    }
  }
  
  &lt;html&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;
      &lt;picture inline-template&gt;
          &lt;div class="background-picture"&gt;
          &lt;div v-for="i in numberOfSlices" :key="i" class="foreground-picture"&gt;&lt;/div&gt;
    &lt;/div&gt;
      &lt;/picture&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  
  Vue.component('picture', {
    data() {
        return {
           numberOfSlices: 20
        }
    }
  });
  
  var vm = new Vue({
    el: '#app'
  });
  </code></pre>