My image is in the CSS file

[TheCodingGuy]

My image is in the CSS file

[mikegreiling]

Unfortunately this script does not parse out CSS rules for the image urls (though that is probably an improvement that could be made in the future). The best solution is to provide the image manually like so:

$('.header#my-header-id1').parallax({imageSrc: '/path/to/image1.jpg'});
$('.header#my-header-id2').parallax({imageSrc: '/path/to/image2.jpg'});

or via data attributes:

<div class="header" id="my-header-id1" data-parallax="scroll" data-image-src="/path/to/image1.jpg">
    ...
</div>
<div class="header" id="my-header-id2" data-parallax="scroll" data-image-src="/path/to/image2.jpg">
    ...
</div>

I realize specifying the image in more than one place is not ideal.

[TheCodingGuy]

Hi Mike!

I tried both via jQuery and data attribute, still no effect...
Do you think I did something wrong this time or is the background: url blocking the plugin completely?

[mikegreiling]

that could be the problem. Try changing the background to transparent and observing the effect.

[TheCodingGuy]

Hi again Mike!

This morning i tried following without result... I did it quick so I might have missed something, I will try again tonight or tomorrow due it's christmas in the most part of northern Europe.

[TheCodingGuy]

Hello

I tried once again today with no success... it looks like the plugin won't work with my projects as i have my backgrounds in CSS.

Is there any other method that i can use or am I completely out of luck with this one?

[mikegreiling]

do you have this page staged someplace where I could take a look at it?

[TheCodingGuy]

Yes, it's actualy hosted here at GitHub: https://github.com/TheCodingGuy/Project_Casablanca

If you wonder why theres no changes for the plugin, it's because the tests I make is made localy on my computer and are not commited.

[scottblinch]

This is a fairly old issue but we ended up using javascript to grab the image source from the CSS.

var bg_src = $bg.css('background-image'); // $bg is the jQuery object of the element we're parallaxifying
bg_src = bg_src.replace('url(','').replace(')',''); // background-image is wrapped with url('') so remove it
$bg.css({'background': 'transparent'}); // make the bg transparent for the parallax to work
$($bg).parallax({
    imageSrc: bg_src
});

[mikegreiling]

Thanks for the feedback @scottblinch.

@TheCodingGuy sorry for my lack of response. I think this issue slipped under the radar after the holiday season and I never got back to it. Did you manage to resolve this issue? I don't see an example of the parallax usage on the github repo you referenced.

Closing for now, pending further feedback.

[gosteev]

@scottblinch
this won't work on firefox, because on second line there will be string in quotes, so there will be %22 in url
here's working variant:

bg_src = bg_src.replace('url(', '').replace(')', '').replace( /['"]/g, "" );