<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|PT+Mono" rel="stylesheet">
  </head>
  <body>
    <h1 class="writing">Parallax effect behind an image cutout: CSS + SVG</h1>
    <div class="writing">
      <p>Please note: This works on desktop/laptop, but not on mobile. I'm working on that!</p>
      <p>Steps:</p>
      <ul>
        <li>Make an SVG cutout of the same background color as your background.</li>
        <li>Make a parallax background with CSS. Use the same proportions as your SVG.</li>
        <li>Place an <span class="code">img</span> of your SVG inside the HTML for your parallax <span class="code">div</span>.</li>
        <li>Align and size parallax background as you like. Don't forget to make things responsive!</li>
        <li>Enjoy!</li>
      </ul>
      <p>Please note, the winking brain is my personal logo and my exclusive copyright. The Oregon grape (not real grapes!) image is my photo, available via Creative Commons on <a href="https://www.flickr.com/photos/alexfiles/4939918772/in/album-72157613801929264/" target="_blank">Flickr</a>.
      
    </div>
    
    <div class="background-oregon-grapes">
       <img src="https://aeoneal.com/imagery/brain-reverse-cutout.svg">
    </div>
      
      
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
  </body>
</html>
/* general CSS, unrelated to parallax or img */
body {
  background: #fff;
  color: #222;
  font-family: 'Source Sans Pro', sans-serif;
}
.code {
  font-family: 'PT Mono', serif;
  color: #090;
}
.writing {
  width: 74%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 560px) {
  .writing {
    width: 96%;
  }
}

/* Parallax CSS */
.background-oregon-grapes {
  background-image: url("http://aeoneal.com/imagery/blog/oregon-grapes.jpg");
  background-size: 100%;
  height: 560px;
  width: 560px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 767px) {
  .background-oregon-grapes {
    height: 330px;
    width: 330px;
  }
}


/* Image CSS for your SVG */
img {
  height: 100%;
  width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.