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.
Prerequisites
- 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
Add an HTML element to your page
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.
Add parallax CSS and HTML code
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.
1<style>2 .parallax-section {3 background-image: url('YOUR_IMAGE_URL_HERE');4 background-attachment: fixed;5 background-position: center;6 background-repeat: no-repeat;7 background-size: cover;8 min-height: 500px;9 display: flex;10 align-items: center;11 justify-content: center;12 position: relative;13 }14 .parallax-overlay {15 background: rgba(0, 0, 0, 0.4);16 padding: 40px;17 border-radius: 8px;18 text-align: center;19 }20 .parallax-overlay h2 {21 color: #ffffff;22 font-size: 36px;23 margin: 0;24 }25 .parallax-overlay p {26 color: #f0f0f0;27 font-size: 18px;28 }29 @media (max-width: 768px) {30 .parallax-section {31 background-attachment: scroll;32 min-height: 300px;33 }34 }35</style>36<div class="parallax-section">37 <div class="parallax-overlay">38 <h2>Your Heading Here</h2>39 <p>Your subtext or call-to-action goes here.</p>40 </div>41</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.
Position foreground content above and below the parallax section
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.
Test across devices and disable parallax on mobile
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.
Add multiple parallax sections for a storytelling layout
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 working example
1PARALLAX SCROLLING — SETUP SUMMARY2====================================34PAGE STRUCTURE:5 Page (Column layout)6 ├── Hero Section Group (regular Bubble group, solid background)7 ├── HTML Element — Parallax Section 18 │ - Code: <style> with background-attachment: fixed9 │ - Image: uploaded to File Manager, URL in CSS10 │ - Width: 100%, Height: 500px min11 │ - Mobile fallback: background-attachment: scroll via @media12 ├── Content Section Group (solid background, regular elements)13 ├── HTML Element — Parallax Section 2 (optional)14 │ - Different background image15 └── Footer Section Group1617KEY CSS PROPERTIES:18 background-attachment: fixed → creates the parallax effect19 background-size: cover → fills the section20 background-position: center → centers the image2122MOBILE FALLBACK:23 @media (max-width: 768px) {24 background-attachment: scroll → disables parallax on mobile25 min-height: 300px → reduces section height26 }2728TROUBLESHOOTING:29 - iOS Safari: background-attachment fixed not supported (fallback handles this)30 - Image not showing: check URL is correct and publicly accessible31 - Jittery scroll: simplify overlapping elements, reduce image file sizeCommon mistakes when building parallax scrolling in Bubble
Why it's a problem: Using a very large image file for the parallax background
How to avoid: Compress your image to under 500KB and use JPEG format for photographic backgrounds
Why it's a problem: Not adding the mobile media query fallback
How to avoid: Always include the @media (max-width: 768px) rule that switches to background-attachment scroll
Why it's a problem: Placing Bubble elements on top of the HTML element expecting interaction
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a parallax scrolling effect to my Bubble.io landing page. I need the background image to stay fixed while text scrolls over it, and I need it to work on mobile too. Can you give me the HTML and CSS code to paste into a Bubble HTML element?
Add a parallax scrolling section to this page with a full-width background image that stays fixed while users scroll. Include an overlay with heading text and ensure it falls back gracefully on mobile devices.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation