<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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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%;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.