0

Using the suggested markup, css is correct, but absolutely no image is showing. When I use regular img tag (i.e.: <img src="*"/>) image shows perfectly... please help, im totally stumped and this thing is supposed to be so easy. Here's my code:

<div class="parallax-window" data-parallax="scroll" data-position="top" data-bleed="10" data-image-src="AE.jpg" data-natural-width="1920" data-natural-height="1000" style="height: 400px;"></div>

css:

.parallax-window {
    min-height: 400px;
    background: transparent;
}

Any insight would be appreciated. Im running jquery 1.11.1 and foundation

Thanks in advance.

Timothy Groote
  • 8,614
  • 26
  • 52
pjldesign
  • 387
  • 1
  • 3
  • 17
  • i think we're missing some vital code here. where are the actual images? doesn't parallax work with a `ul` and all the layers inside `li`'s? – Timothy Groote Oct 02 '15 at 06:28
  • well, i'm referencing this git: http://pixelcog.github.io/parallax.js/... – pjldesign Oct 02 '15 at 07:18
  • Ah that helps :) there's more parallax.js'es appearantly. if you run your page and open up an inspector, can you see the `parallax-mirror` elements, and do they have the proper image inside them? If so, are there any elements with a background color (or non-transparent background) *above* your `parallax-window` element? – Timothy Groote Oct 02 '15 at 07:35
  • no mirrors but no js errors either... i don't think anything has a background-color specified but the body tag... the library doesn't seem to need initialization on document.ready either... (sigh) another 2 day puzzle to unravel. – pjldesign Oct 02 '15 at 11:01
  • an absence of divs with `parallax-mirror` class would point to the javascript not being executed... – Timothy Groote Oct 02 '15 at 11:30
  • Yeah I know but even in the demo page code there's no initialization for the library... – pjldesign Oct 02 '15 at 11:52
  • @pjldesign, did you manage to solve this issue as I've come across it just now where the same code works fine on one server, but not the other and I can't pinpoint where the issue is as there are no errors in the console... – Hayko Koryun Jun 16 '16 at 11:43

4 Answers4

3

You need to set as below

.parallax-mirror {
    z-index:1
}
Anto S
  • 2,448
  • 6
  • 32
  • 50
Wikus
  • 65
  • 1
  • 9
  • The .parallax-mirror element is coming up behind the body element. Are you using the Zurb Foundation CSS framework? – Wikus Jan 03 '16 at 10:02
0

Another issue for image not showing when the plugin is working perfectly is the background colour of a parent element.

In my case, it was a parent container that was wrapped around the entire body content area which had a background: #fafafa!important

Once I removed the background colour and applied it to only the divs that need it issue was solved and parallax image works.

Onimusha
  • 3,348
  • 2
  • 26
  • 32
0

In default bootstrap

body { background-color: #fff; }

change it to

body { background-color: transparent; }

It will work.

Striezel
  • 3,693
  • 7
  • 23
  • 37
Naga
  • 21
  • 6
-1

Try to change the attribute data-img-src to data-src.

This solve my problem.

Aji Imawan
  • 11
  • 3