What is the Difference Between Fixed and Parallax Background Images?
Fixed and parallax background images are a great way to add beautiful imagery to your website. But what exactly is the difference? To answer this question effectively, I have created some visual examples using SiteOrigin Page Builder and Widgets Bundle Plugins to provide a little help. These examples will assist in clearly explaining the difference between Fixed vs Parallax Background Images.
Fixed Background Image
When using a fixed background image, the image will remain static, while the content will move over the image as your scroll down the page.
Fixed Background Image
Inside a Page Builder Row
Parallax Background Image
When using a parallax background image, both the image and the content will move as your scroll down the page, but at different speeds. This effect is known as the parallax scrolling, where background content is moving slower that foreground content. Take a look at the live theme demo for Create, a WordPress Theme by Themetrust. There is an excellent example of a parallax background image in use on the coffee shop homepage.
Parallax Background Image
Inside a Page Builder Row
Side by Side
When comparing a fixed and parallax background image side by side, you can see the difference in how the image moves and the overall effect that is created.
Fixed Background Image
Inside a Widget
I did not know that this was possible with Origin. I’ll try it as soon as possible.
Hi Evert. You will find this feature under the row or widget style settings > design tab. Its called “Background Image Display”.
Hello How I can put the background in lager size by siteorigin?
Great tip! Thanks.
Thanks for this tip. Will be implementing shortly…
“There is an excellent example of a parallax background image in use on the coffee shop homepage.”
I can’t see it myself, its all just static images. No wait the bottom image is very slightly moving in parallax. Your own page is a better demo.
Hi Pat. Thank you. I am glad you like the demo.
Very interesting article.
siteorigin.com is my favourite site since a long time ago : never problems. You are the bests.
Thank you very much from France.
Thierry
Its an absolute pleasure Thierry. And thank you for commenting.
I have been using siteorigin page builder (love it)
“Fixed Background Image Inside a Widget” or “Fixed Background Image Inside a Page Builder Row” do not work in iOS. (ipad and iphone)
I hope you’ve noticed this issue and doing something about it
Thank You
Hi Sinan,
Unfortunately, this is unavoidable. Both Apple and Google have decided to disable fixed backgrounds on mobile devices for performance related reasons. The parallax background will continue to work without issue on mobile devices due to it being a custom implementation, however. Sorry about this! :(
Really beautiful! Thanks for that great demonstration.
However, I’ve tried it few months ago on full width stretched row of SiteOrigin Page Builder. It worked just fine at the beginning, but after a while, when switching languages, it just “froze” and scrolled at the same speed with the rest of the page, like a regular image in its container. So I went for Adam Rob’s plugin, which is great but not as friendly as the feature of Site Origin.
My theme is Enfold, installed on WordPress with WPML for multi-language. It may be in conflict with WPML.
I did’nt try it after the last update of Page Builder. Any tips?
Hey Daniel. Thank you for your comment. In order to assist you further would you mind opening a thread on siteorigin.com/thread. Once you have done that, please send me the thread link and I can escalate it for you.
Guys, I love this post! Great visual/text liaison. Super useful.
Do you think you could expand on it and clarify the different settings too? I struggle with the choice of image size and set up of the widget size on the page. Can you explain the correlation between these vs column and website width?
Thanks so much!
Hi Veronica. I am so glad you love the post. Thank you for your comments. I have made a note of your requests and will keep you up to date with any follow up posts.
It’s awesome
Thank you Natasha!
Really Helpfull, Thank you =)
Thanks for the lesson!
Some of the parallax background plugins and visual page builders change page scroll speeds and it makes a really poor experience for some users. I’m having a big problem with Mac users and Chrome for some reason.
Any tips for that? Besides not doing it?
This is a lot cleaner than what I am using currently, really need to
Excellent as always.
Thank you Stephen
Thanks for the explanation. For a long time I was trying to make a parallax image behave as a fixed image, not understanding what the difference was,
w3schools.com labels a fixed image background as a parallax image. You can see it here: https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm. The confusion seems to widespread. This was the effect I wanted to get, thinking this was a parallax feature. No I know the difference and both are easy to set up in PageBuilder.
Absolute pleasure David. So glad it helped clear up the confusion. Really appreciate your feedback.
Thanks for sharing, I was already trying to do something with parallax backgrounds on my website and this info is helpful.
It would be even better if we could use parallax backgrounds not in a window but I wanted it to show the full width of the page, the same thing with the still background images.
Hi Ricardo. If I am understanding you correctly try edit the Row Settings (Spanner Icon). Under the Layout Tab, set the Row Layout from “Standard” to “Full Width”. Let me know if that is the effect that you are looking for.
LOVE IT!
Is there a tutorial, or parallax docs somewhere? I’m adding the parallax background attributes to images, and all I get is a narrow strip. I need to learn how to set a fixed window in which to see the scrolling background image.
Hey George. Thanks for the comment. Try edit the Row Settings (Spanner Icon). Under the Layout Tab, add some Top and Bottom padding. Try 200px for each. That will increase height of the row and hence the window in which to see the background image. Let me know if that helps.
Thanks, Ian. Should have thought to try that. Works better.
Next question: The page title appears right aligned (slammed) in gray text right on top of the image, even tho’ I’m using “Hidden” as Title Position, and there is no text in the Title Text field.
Any ideas?
Putting a space in the Title text field fixes it…. but seems a little funky.
Sorry…. I meant “left aligned”……
Also…. do I have any control over the starting position?
Thanks for that. Parallax options seem to be disabled in the Hero Image widget. While you can set the style to parallax, the widget itself limits you to cover.
Am I missing something?
Hello love the widget bundles that you guys offer. But it gives me a http error when I upload photos. Please fix. thanks
Wow that is super useful I had seen these before but did not know what the difference really was until looking at this thanks for the info
Fixed Vs Parallax Background Images is a great article! Thanks!
Yeah, great! I love Siteorigin.
Thank you for the post – this has generally saved hours of my day!
That is pretty insane. It is like that new(ish) feature modern smartphones have with the background screen that changes perspective as your head moves. I like it alot!
Thanks for the info Ian! Going to see if we can add this to our company website (www.bestelectricianguelph.com)
Good info!
Cool beans`
I have been using siteorigin page builder (love it)
“Fixed Background Image Inside a Widget” or “Fixed Background Image Inside a Page Builder Row” do not work in iOS. (ipad and iphone)
I hope you’ve noticed this issue and doing something about it
Thank You
Great comparison. Makes it easier to see the visual difference from a viewer’s standpoint. We have never used the parallax background but it’s worth considering to provide some variation as the viewer scrolls content.
Thanks. I noticed that the fixed background effect does not work on my Iphone, so I wondered if there is any solution you propose ?
Regards
Julien
Following. Having same type of issue on the Iphone with our site
Joe
I have been using siteorigin page builder (love it)
“Fixed Background Image Inside a Widget” or “Fixed Background Image Inside a Page Builder Row” do not work in iOS. (ipad and iphone)
I hope you’ve noticed this issue and doing something about it
Thank You
I have a question about something else I don’t know if this is the wrong forum.
There is some plugins which use shortcodes they won’t work. 1) One is calculated field form. 2) and an other one was Blog designer. And I also had problem exporting layouts in some wordpress themes the wouldn’t export them.
Thanks! Works like a charm :-)
Thank you for the tips – looks beautiful!
Thank you for this post and the exemples, explanations about parallax effect cannot be better.
I was looking for the best existing explanations about parallax effect for my customers, that is where i found it ! congrats.
Great themes, looking at them now as they may fit our new development – thanks.
Hi Ian,
Thanks for this article. I always have trouble to distinguish parallax and the fixed background image but now it’s better!
I used to think parallax backgrounds would distract visitors from the content but lately I’ve seen more and more websites which use it very subtle.
How to make parallax background image.
Well, before reading this I was supposing that fix and parallax are same. thank you for this post.
Fascinating article, I had no idea this was possible, will definitely try this out. Thanks Ian.
Hi Ian,
Is it possible to scroll down in one defined speed?
Cheers,
Olaf
In my opinion, I’ll use Parallax to create the background image for my new site log it can be easily fixed anywhere.
Hi, Is there a way we can add video instead of image and then make it like parallax? I am trying to implement this solution https://codeconvey.com/video-parallax-background-using-css3/ but not able to make it work. Can’t we do something fix with videos? Your help must be appreciated. Thanks.
Parralax looks really fantastic. Thank you very much!
The parallax affect is stunning
Plugins SiteOrigin Premium
Beim Aktualisieren von SiteOrigin Premium ist ein Fehler aufgetreten: Verzeichnis konnte nicht angelegt werden. siteorigin-premium/addons/plugin/accordion
Hi Klaus,
It appears you’re experiencing an issue with updating SiteOrigin Premium. Can you please email premium support at [email protected]?
Amazing, i’ve been looking for this a while!
Beautiful just beautiful
Photos added with Parallax Background have better quality than others? I’m running new site and want to know.
Hi Edi-nm,
The quality of the photos is dependent on the image you’re using. Ideally, you should use an image that’s larger than the area you’re applying it to as that will prevent any degrade in quality due to the image not having to be stretched for the parallax to work.
I think the effect is distraction from the content. I always think something goes wrong with the css when i see a parallax or fixed background.
Thank you for this clear explanation, Ian. Is this possible with the free version of origin or do I need to buy the premium version?
Hi Luna,
Yes, this is possible without purchasing SiteOrigin Prmeium. :)
Great post! In my humble opinion, parallax will soon become obsolete and thing in the past. Its another form of distraction really. People like clean and simple websites, no distractions, no flashes, no banner ads, no pop-ups, etc. Less is more!
I did not know that this was possible with Origin. I’ll try it as soon as possible.
awesome!!!
simple and straightforward tutorial. thanks a lot
Thank you very much for the useful article Ian! I had not realised that this was such a big difference as the parallax backgrounds. Will definitely use fixed background images in the future. Do you have any idea about how Fixed Background compares to Parallax Background for page speed?
Hi Koen,
There are no major differences in page load performance. Certain outdated devices may struggle with these effects in general though due to their underpowered CPU but I wouldn’t worry about this too much as there are very few people who use these sort of devices still.
How do I turn paralax off on a rows back ground?
Under design I can see the option to add a back ground image, but no option to turn it off.
Thank you,
Steve
Hi Steve,
You can disable the parallax background effect by opening the row or widget and heading over to the row/widget styles sidebar. Open the Design settings group and then set the Background Image Display to something other than Parallax.
I don’t seem to have this option under Design in the row.
I have version 2.7.1 is this an old version?
Under: Edit row, row styles, design, I find no background image display option.
Hi Stephe,
The latest version is 2.9.7. Please do a backup and then navigate to WP Admin > Dashboard > Updates and click Check Again. Do you see any pending updates for Page Builder by SiteOrigin? If so, please update it.
This is beautiful, just saying, will try and use if I can work out how to do it.
Really interesting. I got the siteorgin builder last week and will definitely give it a try on my blog. Do you think this would be possible on highlighted images of posts? So i can make the cover image scroll able?
Can you add the Parallax effect to video?
Hi Stellan,
Unfortunately, it’s not possible to apply this effect to videos at this time.
Thanks Alex, I saw it here, http://morpheus.smallfacemedia.com/
Maybe you can work on that as it would be very popular I feel! :-)
Nice Job! Will it be possible to apply this effect to videos?
This is quite cool, nice technique with the fixed background image in the page builder row as well as the parallax (obviously).
Nice to know that this is possible with Origin. Thank you for the excellent support!
nice
Thanks for reading, if you have any comments or questions, please, let us know.
The article helped me a lot, thanks for sharing.
Nice Job! Will it be possible to apply this effect to videos?
Hi Tomasz
Thanks for reading.
Unfortunately, not from within a SiteOrigin widget. Not as far as I’m aware.
Photos added with Parallax Background have better quality than others? I’m running new site and want to know.
Hi, thanks for reaching out. Using parallax or not won’t impact the quality of the background images used.
Thanks for telling the difference
Sure :) Thanks for reading.
Really good and helpful
Hi Arshad, thanks, glad you enjoyed the post :)
Finally someone that gets it right!
I’ve been looking at a bunch of “parallax” site demos and implementations (some even “award winning” in the Parallax category lol) which are nothing more than fixed backgrounds on multiple layers, as you’ve shown here on the left-side examples. While they may be clever and pretty and all, they are absolutely NOT a parallax effect if the backgrounds are static, no matter how many of them there are.
Your demos are splendid examples on how to do the effect properly. Very well done!