how to fill background-image and add contents in parallax_sections? #629

hank-hong opened this Issue Dec 14, 2016 · 0 comments


None yet

1 participant


I'm newer to css and ScrollMagic. I have two problems when I used parallax_sections of ScrollMagic.

Refer to the example "parallax_sections" in ScrollMagic-v2.0.5.

If I change the background-image to another one, such as "" (Large pictures contains the rich content, not simple color or patterns), then the page won't display the whole picture, only display the part of it.

I added background image in div by using the follows codes:
background: url(......) no-repeat center center;background-size: cover;

I think it may be caused by the css ".parallaxParent > * {height: 200%;position: relative;top: -100%;}" in example, but the parallax_sections won't work if I remove this css.

The second problem is I don't know how to add content inside div (contains the background) to display some text or other pictures on the background image.
Example for

<div id="parallax1" class="parallaxParent">
<div style="background: ....>

    <div style="width:100%;">
    <div style="width:50%; text-align:left; color:black;font-size:large">
        <p><img src="..." style="heigth:80%;width:80%" alt="This is the logo I want to display" /></p>
        <p class="content-size" style="padding-left:2.5em">
            Some contents to display.
        <p style="padding-left:2.5em">
            <a href="#" class="bttn bttn-main">some buttons</a>


Please see the detail in url

Could someone help me to solve them?

Thanks in advance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment