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

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

Projects

None yet

1 participant

@hank-hong

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 "http://www.desktopwallpaperhd.net/wallpapers/2/7/mountain-wallpaper-road-screensavers-mountains-background-20535.jpg" (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>
        <p style="padding-left:2.5em">
            <a href="#" class="bttn bttn-main">some buttons</a>
        </p>
      </div>
    </div>

</div>
</div>

Please see the detail in url https://codepen.io/hank_HONG/pen/NbOLbx

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