Home>Blog>What is the Difference Between Fixed and Parallax Background Images?

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

Parallax Background Image
Inside a Widget

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. 5 months, 17 days ago Evert

    I did not know that this was possible with Origin. I’ll try it as soon as possible.

    • 5 months, 17 days ago Ian Rossiter Hi, I Work Here

      Hi Evert. You will find this feature under the row or widget style settings > design tab. Its called “Background Image Display”.

  2. 5 months, 17 days ago Jason

    Great tip! Thanks.

  3. 5 months, 17 days ago Tim

    Thanks for this tip. Will be implementing shortly…

  4. 5 months, 17 days ago pat

    “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.

    • 5 months, 17 days ago Ian Rossiter Hi, I Work Here

      Hi Pat. Thank you. I am glad you like the demo.

  5. 5 months, 17 days ago Thierry

    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

    • 5 months, 17 days ago Ian Rossiter Hi, I Work Here

      Its an absolute pleasure Thierry. And thank you for commenting.

  6. 5 months, 17 days ago Sinan

    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

    • 5 months, 17 days ago Alex S

      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! :(

  7. 5 months, 17 days ago Daniel Jaros

    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?

    • 5 months, 17 days ago Ian Rossiter Hi, I Work Here

      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.

  8. 5 months, 17 days ago Veronica

    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!

    • 5 months, 17 days ago Ian Rossiter Hi, I Work Here

      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.

  9. 5 months, 17 days ago Natasha Advani

    It’s awesome

    • 5 months, 17 days ago Ian Rossiter Hi, I Work Here

      Thank you Natasha!

  10. 5 months, 17 days ago Maze Sire

    Really Helpfull, Thank you =)

  11. 5 months, 17 days ago Marjorie

    Thanks for the lesson!

  12. 5 months, 16 days ago Kyle Alm

    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

  13. 5 months, 16 days ago Stephen Hill

    Excellent as always.

    • 5 months, 16 days ago Ian Rossiter Hi, I Work Here

      Thank you Stephen

  14. 5 months, 16 days ago David LeBlanc

    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.

    • 5 months, 16 days ago Ian Rossiter Hi, I Work Here

      Absolute pleasure David. So glad it helped clear up the confusion. Really appreciate your feedback.

  15. 5 months, 14 days ago Ricardo Penders

    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.

    • 5 months, 13 days ago Ian Rossiter Hi, I Work Here

      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.

  16. 5 months, 13 days ago George Jardine

    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.

    • 5 months, 13 days ago Ian Rossiter Hi, I Work Here

      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.

      • 5 months, 13 days ago George Jardine

        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.

        • 5 months, 13 days ago George Jardine

          Sorry…. I meant “left aligned”……

        • 5 months, 12 days ago George Jardine

          Also…. do I have any control over the starting position?

  17. 5 months, 9 days ago Andy Whincup

    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?

  18. 5 months, 4 hours ago Kat

    Hello love the widget bundles that you guys offer. But it gives me a http error when I upload photos. Please fix. thanks

  19. 4 months, 28 days ago Jessica Lee

    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

  20. 4 months, 28 days ago https://civilengineeringaid.com/

    I am certain this post has offered me some assistance with saving numerous hours of perusing other related presents just on find what I was searching for. Much obliged!

  21. 4 months, 28 days ago ColdFusion Project Help

    It is a well-maintained site where people can learn about various topics. I am looking forward to read more blogs from here. Students finding it tough to write an assignment can try our online assignment help and can get their coursework written by assignment experts.

  22. 4 months, 17 days ago Joey Buttafuoco

    Fixed Vs Parallax Background Images is a great article! Thanks!

  23. 4 months, 17 days ago Josef H

    We are looking at one of your themes for our new website.

    Josef Haraman – Limos On The Strip

  24. 4 months, 7 days ago Kien Huynh

    Yeah, great! I love Siteorigin.

  25. 4 months, 5 days ago Mesa Tow Truck Company

    Beautiful stuff. We built our site on Weebly, and this really helped us. Thanks for the post.

  26. 3 months, 27 days ago James Swinton

    I really like the parallax sections in my website but wish they would remain parallax when on mobile version.  You can check out it out website here (Luxury Car Service in Charleston SC) and let me know if you have any editing suggestions.
    Thanks – Jimmy

  27. 3 months, 25 days ago Jack

    Thank you for the post – this has generally saved hours of my day!

  28. 3 months, 16 days ago Coventry gutter cleaners

    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!

  29. 3 months, 6 days ago Andy

    Thanks for the info Ian! Going to see if we can add this to our company website (www.bestelectricianguelph.com)

  30. 2 months, 29 days ago Jerome Patrick

    Good info!

  31. 2 months, 19 days ago Carlois

    Cool beans`

  32. 2 months, 19 days ago Carlois

    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
    Abogados de accidentes

  33. 2 months, 19 days ago Carlois

    Great result!
    Abogados de accidentes

  34. 2 months, 17 days ago Tom

    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.

  35. 2 months, 14 days ago Julien

    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

  36. 2 months, 11 days ago Skidmark Design

    Following. Having same type of issue on the Iphone with our site

    Joe

  37. 1 month, 25 days ago Norris James

    I was having a similar problem with my iPhone when I tried viewing my friends website but after the latest IOs update, it seems to be all good!

  38. 1 month, 24 days ago Micheal flanifan

    This is so cool! I will try this out asap

  39. 1 month, 24 days ago Billy Rae

    Is there an easy way to access this feature? I have tried setting and CTRL but no luck :/
    Can someone reply please?

    Thank you!

  40. 1 month, 24 days ago Jonathan Couldin

    Very insightful tips on this forum indeed!

  41. 1 month, 24 days ago Daneil Jones

    You’ll need the paraxify.js file and also the _paraxify.scss file or the CSS equivalent.

    Start with a centered background image bigger than the element it’s been set on.
    Add the paraxify class to the elements that you want to paraxify.
    .paraxify{
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;

  42. 1 month, 23 days ago Stacey Kieblerz

    }
    Now just start the JavaScript part at the end of your document:
    myParaxify = paraxify(‘.paraxify’);
    Ready to go! You should see the background images parallaxing.
    IMPORTANT: Parallax and touch devices usually don’t get along. So I highly suggest you to use modernizr’s touch events. For example:

    if(!Modernizr.touch){
    myParaxify = paraxify(‘.paraxify’);
    }
    Nice, isn’t it?
    The speed is determined by the difference between the element’s height and the image’s. However, you can slow it down or boost it up using the options avalible:

  43. 1 month, 23 days ago Stacey Kieblerz

    speed (float, 0 to 1, 1 by default): It’s proportional to the hidden part of the image.
    0: It would be completely stopped.
    1: It would scroll all the hidden part of the background image.
    boost (float, 0 to 1, 0 by default): Boost uses the visible part of the image to speed the scroll speed a bit.
    0: There wouldn’t be a boost.
    1: It would scroll all the visible part of the background image.
    So by default it scrolls all the hidden part but none of the visible.

    I had performance in mind when I built this plugin, so only the visibe photos are scrolled. As long as the background is fixed, the images will scroll all the hidden part accordingly to the scroll position. This way you can control when it’s active or not just switching the background-attachment property on CSS to scroll.

    I wanted the background to be fixed so it creates a nice pure CSS parallax effect in case the JavaScript is not supported or disabled in the browser. Go on, try disabling JavaScript!

    Credit where it’s due

  44. 1 month, 23 days ago Ronald Mcdonalds

    What parallax.js will do is create a fixed-position element for each parallax image at the start of the document’s body. This mirror element will sit behind the other elements and match the position and dimensions of its target object.

    Due to the nature of this implementation, you must ensure that these parallax objects and any layers below them are transparent so that you can see the parallax effect underneath. Also, if there is no other content in this element, you will need to ensure that it has some fixed dimensions otherwise you won’t see anything.

  45. 1 month, 10 days ago Drip Systems

    I’ve always wanted to know the difference between the two and now I know. Thanks for the helpful article!

  46. 1 month, 10 days ago Babbitt Bearing

    In the past I’ve always used fixed, now I might try the parallax. It looks much better in my opinion.

  47. 1 month, 10 days ago Sam Smith

    Hi Evert. You will find this feature under the row or widget style settings > design tab. Its called “Background Image Display”.

  48. 1 month, 7 days ago trafficsolder.com

    Thanks for this tip. i love your blog.

    my blog : https://trafficsolder.com

  49. 1 month, 4 days ago Towing Service Avondale

    Very interesting article. I never knew the difference between parallax before reading this.

  50. 1 month, 4 days ago Tree Company

    Interesting article….I’ve often wondered the difference between the two of them.

  51. 28 days, 1 hour ago Casa Grande Towing Company

    Thanks for the article on the difference between the two. In my graphic biz I only use fixed, but now will try parallax backgrounds also. Keep up the good information, I’ll be back to the site!

  52. 27 days, 21 hours ago Terry

    Thanks for the tips, really appreciate it.

  53. 26 days, 6 hours ago Davey

    ThanksIan, going to pass this info along to our website guy!

  54. 26 days, 6 hours ago Guelph Roofer

    Thanks again Ian, I think this will help take our roofing website to the next level

    Davey – Guelph Roofer

  55. 16 days, 14 hours ago Jayson Campbell

    Will definitely try this soon.

    http://www.chesapeaketreeandcrane.com/

  56. 16 days, 14 hours ago Robert Simpson

    Thank you for the information – https://www.treeservicechesapeake.com/

  57. 7 days, 15 hours ago Reviews

    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

  58. 7 days, 15 hours ago Reviews

    Great article

  59. 7 days, 3 hours ago Appliance Repair

    Beautiful stuff. We usually use Wix and this is really good stuff…thanks.

  60. 4 days, 4 hours ago Magic Mike

    The ipad doesn’t do fixed backgrounds and it will just scroll along with the element.

    As mentioned you can do it by using a fixed element instead537 but the problem arises if you only want that background to show in one particular div. It all depends of how your page is set up and what else is going on but what you can do is apply the fixed element as shown and then give your page elements a white background (or whatever) and then for the parallax div you leave it transparent so that it shows the fixed background behind.

  61. 4 hours, 31 minutes ago John

    Great info here, thank you for your help!

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More