0
Welcome Guest! Login
0 items Join Now

Fixed background with content (particles, modules etc.) floating on top

    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    Fixed background with content (particles, modules etc.) floating on top

    Posted 8 years 5 months ago
    • The best way to explain what I am after is demonstrated by the refraction template (with the new refraction you have to change the background to "fixed" to get what I want).

      eg. www.progressivewingchun.com

      The background stays the same as everything else scrolls over the fixed background.
      In other words, I am trying to recreate refraction using a Gantry5 template. If you know of a good starting point Gantry5 template, that would be great. I realize I will have to play with custom.scss to achieve some of the aspects.
    • Thanks in advance,
      Steve Hodges
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Fixed background with content (particles, modules etc.) floating on top

    Posted 8 years 5 months ago
    • What am I missing? Your background image is fixed as you scroll the page.
    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    Re: Fixed background with content (particles, modules etc.) floating on top

    Posted 8 years 5 months ago
    • I want to achieve the same look and feel with Gantry5. www.progressivewingchun.com is built on refraction which now uses Gantry4 and I want to update the site to Gantry5 and keep up with the times. How would I add a fixed background image to say Hydrogen?
    • Last Edit: 8 years 5 months ago by neuclix.
    • Thanks in advance,
      Steve Hodges
    • neuclix's Avatar
    • neuclix
    • Hero Rocketeer
    • Posts: 298
    • Thanks: 3

    Re: Fixed background with content (particles, modules etc.) floating on top

    Posted 8 years 5 months ago
    • yes the background image is fixed as you scroll the page on that particular site. I was merely using that page as an example of what I want to achieve using Gantry5. Could you please point me in the right direction? In other words I want to almost duplicate something similar to refraction using Gantry5. Thank you Thank you
    • Thanks in advance,
      Steve Hodges
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: Fixed background with content (particles, modules etc.) floating on top

    Posted 8 years 5 months ago
    • neuclix wrote:
      yes the background image is fixed as you scroll the page on that particular site. I was merely using that page as an example of what I want to achieve using Gantry5. Could you please point me in the right direction? In other words I want to almost duplicate something similar to refraction using Gantry5. Thank you Thank you

      If you use Hydrogen then In your [JOOMLA-ROOT]/templates/g5_hydrogen/custom/scss/custom.scss (<--CLICK this is link) file add this:
      // Page Background
      #g-page-surround {
          background: url('../../images/bgimage.jpg?5627db32');
          background-attachment: fixed;
      }
      #g-showcase {
          background-color: transparent;
      }
      #g-main {
          background: transparent;
      }
    • The following users have thanked you: neuclix

Time to create page: 0.038 seconds