CSS background images won't work on pinned images

(pretty self-explanatory)

actually it's not pretty self-explanatory. Assuming you mean background images on pinned elements (not images) it still does not explain your problem. Especially since I know for a fact that background images do work on pinned elements. Please further clarify or create a jsfiddle to showcase this problem.

Okay, I have this in the HTML:

      <section id="dna">
        <article>
          <h2><span>It's in</span></h2>
          <main>
            <h1><span>our DNA</span></h1>
            <h4>To get up, and get on with it<br/>or get up, and go again.</h4>
          </main>
        </article>
      </section>

and in the CSS I am applying a background image to #dna. Here some parts of the SCSS code:

#dna {
    background-image: url('/img/rugby.jpg');

    article {

        width:          570px;
        height:         300px;
        margin-left:    40%;

        h1,
        h2,
        h4 {
            white-space: nowrap;
        }

        h1,
        h2 {
            display: block;

            span {
                background: $pink;
            }
        }
    }
}

When I pin it with ScrollMagic like scene.setPin('#dna'); then it gets fixed but the background image won't become visible anymore.

I think I know why. When pinned, the whole is wrapped in another

with a padding-bottom, hence the background image was not visible on screen.

Here is the whole HTML code:

<!DOCTYPE html>
<html>
  <head>
      ...

      <link rel="stylesheet" href="/css/nss.css" type="text/css">
  </head>
  <body>

    <main>
      <section id="intro">
        <article>
          <h1>Blahblah...</h1>
        </article>
        <p class="hint">Scroll down to play</p>
      </section>

      <section id="nation">
        <article>
          <header>
            <h1>Blahblah...</h1>
          </header>
          <h4>Blahblah...</h4>
        </article>
      </section>

      <section id="dna">
        <article>
          <h2>Blahblah...</h2>
          <main>
            <h1>Blahblah...</h1>
            <h4>Blahblah...</h4>
          </main>
        </article>
      </section>

      <section id="blood">
        <article>
          <h2>Blahblah...</h2>
          <h1><Blahblah...</h1>
          <h4>Blahblah...</h4>
        </article>
      </section>

      <section id="belief">
        <article>
          <h2>Blahblah...</h2>
          <h1>Blahblah...</h1>
        </article>
      </section>

    </main>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/js/vendor/jquery/dist/jquery.min.js"><\/script>')</script>

    <script src="/js/vendor/gsap/src/minified/jquery.gsap.min.js"></script>
    <script src="/js/vendor/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
    <script src="/js/vendor/gsap/src/minified/TweenMax.min.js"></script>
    <script src="/js/vendor/ScrollMagic/js/jquery.scrollmagic.min.js"></script>

    <script src="/js/main.js" type="text/javascript"></script>
  </body>
</html>

I am trying to

pin #dna
to move in the whole dna section from the bottom left corner
to wipe in section #blood from the left
and when done, unpin everything and continue with the last slide #belief from the bottom.

The problem is the pinning part. All my attempts in the JS code failed.

Please create a jsfiddle of your setup and I will try to help you sort this out.

It is too big and too complex to reduce it to a jsfiddle, so I will email you a private link to the current demo.

try to learn the basic codes first about css background images. you may use this site as a guide: http://www.generatecss.com/css/background/

@ivymarielimos I wrote CSS for over 15 yrs, I know the basic stuff very well ;)

Hi Michael, I got your e-mail but I'm afraid I will not reply to it.

You see I am investing my time for the benefit of the community so that future users of ScrollMagic, running into the same problems will find solutions here. Private support is something I would have to regard as a work assignment. Being a web developer yourself I am sure you understand that.

From my experience I know for a fact, that almost nothing is to complicated for a jsfiddle. Even if it seems like it is, if reduced to the core issue, it's not. This is actually part of the reason why it's helpful. Abstracting away from a complex page that already contains other scripts and effects stands in the way of concentrated debugging - both for you and me. This Issue is a very good example of how a fiddle can be abstracted and helps in finding a solution. It might even provide some insight for your specific case.

So try to think about exactly it is what you want to do and then make a fiddle where it is as simple as possible. E.g. one div that says "this should slide in" etc. and take it as far as you can.

Then I am more than happy to help you.

regards, J

I totally agree with you @janpaepke - I wasn't thinking straight and a bit desperate that time. Today I invested hours and finally found the mistake: The pinned element didn't have a width. All I had to set is a width: 100% in the CSS and then it worked!

Maybe you should document somewhere that a width is needed for pinned element.

And then, MANY THANKS for your great library and respect for what you have done for the community!

Actually it shouldn't have to. I heard before and noticed myself that it sometimes fails without a set width. But this can be viewed as a bug and if I have a way of reliably reproducing it I will try to fix it.

"actually it's not pretty self-explanatory." I laughed hard at that one. Sorry for off-topic but credits for that.

janpaepke / ScrollMagic

CSS background images won't work on pinned images #126