# How to build parallax scrolling in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 15-20 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Parallax scrolling in Bubble is achieved by embedding CSS and JavaScript inside an HTML element that moves a background image at a different speed than the foreground content. This tutorial shows how to create depth-effect sections using custom code within Bubble's visual editor, no plugins required.

## Overview: Parallax Scrolling in Bubble

Parallax scrolling creates visual depth by moving background images slower than foreground content as users scroll. In Bubble, this effect requires an HTML element with CSS styling since the native design tools do not support background-attachment properties. This tutorial is for non-technical builders who want to add a polished scroll effect to landing pages, portfolios, or marketing sections.

## Before you start

- A Bubble account with an app
- A high-quality background image uploaded to Bubble or hosted externally
- Basic understanding of the Design tab and HTML elements

## Step-by-step guide

### 1. Add an HTML element to your page

Open your page in the Design tab. Click the '+' icon and search for 'HTML.' Drag the HTML element onto your page where you want the parallax section. Resize it to full width and set the height to at least 400-600px. This element will contain both the CSS for the parallax background and the visual effect itself.

**Expected result:** An HTML element is placed on the page at the desired location and size.

### 2. Add parallax CSS and HTML code

Double-click the HTML element to open the code editor. Paste the parallax code that creates a full-width section with a fixed background image. Replace the image URL with your own uploaded image URL from Bubble's File Manager. The key CSS property is 'background-attachment: fixed' which keeps the background stationary while content scrolls over it.

```
<style>
  .parallax-section {
    background-image: url('YOUR_IMAGE_URL_HERE');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .parallax-overlay {
    background: rgba(0, 0, 0, 0.4);
    padding: 40px;
    border-radius: 8px;
    text-align: center;
  }
  .parallax-overlay h2 {
    color: #ffffff;
    font-size: 36px;
    margin: 0;
  }
  .parallax-overlay p {
    color: #f0f0f0;
    font-size: 18px;
  }
  @media (max-width: 768px) {
    .parallax-section {
      background-attachment: scroll;
      min-height: 300px;
    }
  }
</style>
<div class="parallax-section">
  <div class="parallax-overlay">
    <h2>Your Heading Here</h2>
    <p>Your subtext or call-to-action goes here.</p>
  </div>
</div>
```

> Pro tip: Use Bubble's File Manager to upload images, then right-click the file and copy its URL to paste into the CSS background-image property.

**Expected result:** The HTML element now displays a section with a background image that stays fixed while the page scrolls.

### 3. Position foreground content above and below the parallax section

Add regular Bubble Groups or Text elements above and below the HTML parallax element on your page. As users scroll through these sections, the parallax background in between will create the depth illusion. Make sure the elements above and below have solid background colors so the parallax image is only visible through the HTML element window.

**Expected result:** Scrolling the page reveals the parallax effect as content moves over the fixed background.

### 4. Test across devices and disable parallax on mobile

Click the Responsive tab and preview at different breakpoints. On iOS devices, background-attachment fixed is not supported and can cause visual glitches. The CSS media query in the code already switches to background-attachment scroll on screens under 768px wide. Preview your app in a mobile browser to confirm the fallback works correctly.

> Pro tip: For a smoother mobile experience, consider using a static image with a subtle CSS transform animation instead of parallax on small screens.

**Expected result:** The parallax effect works on desktop and gracefully falls back to a static background on mobile devices.

### 5. Add multiple parallax sections for a storytelling layout

To create a multi-section parallax page, duplicate the HTML element and place copies between different content sections. Use different background images for each parallax HTML element to create a storytelling scroll experience. Adjust the min-height and overlay text for each section independently.

**Expected result:** Multiple parallax sections appear throughout the page, each with a different background image and overlay content.

## Complete code example

File: `Workflow summary`

```text
PARALLAX SCROLLING — SETUP SUMMARY
====================================

PAGE STRUCTURE:
  Page (Column layout)
  ├── Hero Section Group (regular Bubble group, solid background)
  ├── HTML Element — Parallax Section 1
  │   - Code: <style> with background-attachment: fixed
  │   - Image: uploaded to File Manager, URL in CSS
  │   - Width: 100%, Height: 500px min
  │   - Mobile fallback: background-attachment: scroll via @media
  ├── Content Section Group (solid background, regular elements)
  ├── HTML Element — Parallax Section 2 (optional)
  │   - Different background image
  └── Footer Section Group

KEY CSS PROPERTIES:
  background-attachment: fixed   → creates the parallax effect
  background-size: cover         → fills the section
  background-position: center    → centers the image

MOBILE FALLBACK:
  @media (max-width: 768px) {
    background-attachment: scroll  → disables parallax on mobile
    min-height: 300px             → reduces section height
  }

TROUBLESHOOTING:
  - iOS Safari: background-attachment fixed not supported (fallback handles this)
  - Image not showing: check URL is correct and publicly accessible
  - Jittery scroll: simplify overlapping elements, reduce image file size
```

## Common mistakes

- **Using a very large image file for the parallax background** — Large images cause slow page loads and jittery scrolling, especially on slower connections Fix: Compress your image to under 500KB and use JPEG format for photographic backgrounds
- **Not adding the mobile media query fallback** — iOS Safari does not support background-attachment fixed, causing broken layouts on iPhones Fix: Always include the @media (max-width: 768px) rule that switches to background-attachment scroll
- **Placing Bubble elements on top of the HTML element expecting interaction** — Bubble elements overlapping an HTML element can have z-index conflicts and click events may not register Fix: Keep all interactive content (buttons, links) inside the HTML code itself, or place Bubble elements in separate sections above and below

## Best practices

- Compress parallax background images to under 500KB for optimal scroll performance
- Always include a mobile fallback using CSS media queries for iOS compatibility
- Use a dark overlay on parallax backgrounds to ensure text remains readable
- Limit parallax sections to 2-3 per page to avoid overwhelming the user
- Test in multiple browsers since parallax rendering varies across Chrome, Safari, and Firefox
- Use Bubble's File Manager for hosting images so they benefit from Bubble's CDN

## Frequently asked questions

### Does parallax scrolling work on all Bubble plans?

Yes. HTML elements are available on every Bubble plan including Free, so parallax scrolling works regardless of your subscription.

### Will parallax affect my app's performance?

Minimally, if you optimize images. Compress backgrounds to under 500KB and limit parallax sections to 2-3 per page. Heavy unoptimized images will cause noticeable scroll lag.

### Can I use dynamic images from the database as parallax backgrounds?

Not directly in an HTML element. You would need to use the Bubble Toolbox plugin to pass a dynamic image URL into the HTML element via a JavaScript-to-Bubble bridge.

### Why does the parallax not work on my iPhone?

iOS Safari does not support background-attachment fixed. The CSS media query in this tutorial automatically disables the parallax effect on mobile and shows a static background instead.

### Can I add a parallax effect to a Repeating Group?

Not recommended. Repeating Groups render multiple cells dynamically, and applying parallax CSS inside them would cause rendering conflicts. Use parallax only in standalone HTML sections.

### Is there a plugin for parallax scrolling in Bubble?

Some third-party plugins exist on the Bubble marketplace for scroll effects, but the HTML and CSS approach in this tutorial gives you more control and avoids plugin dependency.

### Can RapidDev build a full landing page with parallax effects?

Yes. RapidDev can design and implement polished landing pages with parallax scrolling, animated sections, and responsive layouts tailored to your brand.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/set-up-a-parallax-scrolling-feature-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/set-up-a-parallax-scrolling-feature-in-bubble