Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    scrolling effect over background image

    General Discussion
    2
    3
    413
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      Susi last edited by

      Hey guys,

      I have a question about scrolling effects and background images. So on http://pineal.studio/ the body is scrolling OVER the background image. How can I make that work? Do I need a plugin or work with the code, or did I just overlook the option in the laytheme?

      Thank you so much for helping!
      Susi

      S 1 Reply Last reply Reply Quote 0
      • S
        Susi @Susi last edited by

        @susi
        ok, is it possible, that I need the Fullscreen-Addon for this effect?

        1 Reply Last reply Reply Quote 0
        • mariusjopen
          mariusjopen Global Moderator last edited by

          Hi @Susi

          That is also possible without plugin.

          Have a look here:

          0_1509965789844_Bildschirmfoto 2017-11-06 um 11.51.52.png

          You set a background picture

          0_1509965807612_Bildschirmfoto 2017-11-06 um 11.52.05.png

          You make the height of the row the browser height

          0_1509965832494_Bildschirmfoto 2017-11-06 um 11.52.13.png

          That will look like this

          0_1509965847769_Bildschirmfoto 2017-11-06 um 11.52.46.png

          You give the first row a class called background

          0_1509965865012_Bildschirmfoto 2017-11-06 um 11.53.12.png

          You make a second row with some content.

          0_1509966067706_Bildschirmfoto 2017-11-06 um 12.00.38.png

          You give that row the class: second-row

          .background {
              position: fixed;
              top: 0px;
              margin: 0px;
              left: 0px;
              width: 100vw;
          }
          
          .second-row {
              margin-top: 100vh;
          }
          

          You add this to your Custom CSS code.

          DONE!

          I hope that was easy to understand :-)

          Best!

          Marius

          www.mariusjopen.world

          1 Reply Last reply Reply Quote 0
          • First post
            Last post

          Before you post

          Use the Search Feature. Maybe there is already a solution to your issue.

          1. Update Lay Theme and all Lay Theme Addons
          2. Disable all Plugins
          3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
          4. Now see if your problem solved itself
          5. Go here, see if your problem is listed here:
          Troubleshooting

          When you post:
          1. Post a link to where the problem is
          2. If the problem is difficult to explain, post screenshots / link to a video to explain it

          Thanks!

          Online Users

          C

          Recent Topics

          • C

            image carousel bugging out

          • N

            help needed with cleaning up and optimising lay theme portfolio website

          • R

            Html5 Video Player issue

          laytheme.com