Running your parallax image behind a cut-out figure

design, fun

I love parallax, but I wanted to take it up a notch and run it behind the outline of a figure (as opposed to knocking out text). So I played around in CodePen and came up with the below.

Steps:

  • Make an SVG cutout of the same background color as your background.
  • Make a parallax background with CSS. Use the same proportions as your SVG.
  • Place an img of your SVG inside the HTML for your parallax div.
  • Align and size parallax background as you like. Don’t forget to make things responsive!
  • Enjoy!

A note: This doesn’t work in mobile because mobile doesn’t manage background-attachment: fixed well. Also some contexts, such as blogs, may play with your CSS. Adjust accordingly.

Demo

HTML

<div class=”parallax-image”>
    <img class=”cutout” src=”https://aeoneal.com/imagery/brain-reverse-cutout.svg”>
</div>

CSS

/* Parallax CSS. Change image and size to suit your needs. */
.background-oregon-grapes {
    background-image: url(“https://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 */
.cutout {
    height: 100%;
    width: auto;
}