How to add a 3D parallax photo to your website

A parallax effect makes a page feel alive: layers move at different speeds, so a flat screen suddenly has depth. There are two kinds you can add to a website. The classic scroll parallax, where a background image moves slower than the page, and an interactive 3D photo, where the picture itself has real depth and tilts with the mouse or the phone. Here is how to add both.

Option 1: classic CSS parallax scrolling

The simplest parallax needs no JavaScript at all. A fixed background image stays still while the content scrolls over it:

<section class="parallax">
  <h2>Your headline</h2>
</section>

<style>
  .parallax {
    min-height: 60vh;
    background-image: url("/images/hero.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* the parallax part */
  }
  @media (max-width: 768px) {
    /* iOS ignores fixed backgrounds: fall back to normal */
    .parallax { background-attachment: scroll; }
  }
</style>

It is quick and light, but the image stays flat: everything in the photo moves together. iPhones also ignore fixed backgrounds, so on mobile the effect simply turns off.

Option 2: an interactive 3D parallax photo

A 3D photo moves inside the picture. AI builds a depth map of your image, so the person in front shifts more than the wall behind. It works on desktop and mobile and catches the eye on hero sections, product pages, portfolios and blog posts.

Step 1: make the 3D photo

1. Upload your image on deep-photo.app. The 3D version is ready in about 10 to 30 seconds.
2. Create a free account and save it to your library. The free plan keeps up to 3 photos with share links and embeds; Pro has no limit.

Step 2: copy the embed code

In your library, open the photo and click Share. Set the width and copy the embed code. It looks like this:

<deep-photo-app data-key="YOUR-PHOTO-KEY"
  style="width:400px;aspect-ratio:0.75"></deep-photo-app>
<script async src="https://deep-photo.app/embed.js" charset="utf-8"></script>

The script registers a small web component that draws the photo with WebGL. It loads asynchronously, so it doesn't hold up your page.

Step 3: paste it into your site

• Plain HTML: paste it where the image should be.
• WordPress: add a Custom HTML block in the editor and paste the code.
• Webflow: use an Embed element.
• Wix, Squarespace, Shopify: use the custom code or HTML embed block of your builder.

Tips for a great parallax section

• Pick an image with depth: a subject in front of a background. A product on a table, a person in a street, a landscape with a tree in front.
• Give it room. 3D photos look best at 300 to 600 pixels wide, next to your headline or as the centerpiece of a section.
• Keep one per screen. One moving element draws the eye; five compete with each other.
• Add a video version for socials. Export the same 3D photo as an MP4 and use it in Reels and TikTok to promote the page.

CSS parallax or 3D photo?