I'll start with my bottom-line question: As of 2013-March, is jQuery able to manipulate CSS attributes of any image defined as a Multiple Background for a given DIV?
The stacking works perfectly ... but now I want to individually manipulate the layered backgrounds, by dynamically altering their vertical position as the page is scrolled up/down.
Unless I am doing something wrong, jQuery is unable to reference the individual images ... but, rather, affects the entire DIV (all images).
@Paulie_D - I apologize but assure you that I AM the original "Paulie D" ... long before that retard from Jersey Shore prostituted my good name all over God's creation :)
@CrocoDillon - Thanks very much for the example. While it works in the Codepen, my implementation is producing the following error:
TypeError: element.css is not a function
At this line: var positions = element.css('background-position').split(',');
It might help if I clarify some details:
I am loading JQ from //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
I have 4 images (1-3 have transparency, the 4th is background).
The layers are large dimension and sit inside a div of limited height with overflow hidden which creates a "window" where the "parallax" effect will occur.
When overlayed, they form a composite image.
On browser scroll up/down, I want to move the layers individually on a vertical axis thereby creating the final parallax effect.
Crap - this forum sucks for pasting code. I will try using Codepen and update this post afterwards.
@CrocoDillon - I figured out my issue, after spending too much time trying to find a neutral place to upload my images for use in Codepen. I tried SkyDrive but this doesn't allow for direct access to images, as well as Flickr which altered by transparent PNGs to JPGs. CRAP!
My issue was that I needed to use the background shorthand!
This WORKED:
background: url(http://yada.ya/1.png) top center / auto auto content-box no-repeat,
url(http://yada.ya/2.png) top center / auto auto content-box no-repeat,
url(http://yada.ya/3.png) top center / auto auto content-box no-repeat,
url(http://yada.ya/4.png) top center / auto auto content-box no-repeat #000000;
THANK YOU so very much. I would like to send you $25 USD for your assistance - let me know how to best accomplish that. I also liked your work on Codepen - keep up the great work.
Glad you figured it out :) On a side note, in the codepen it still works without using the shorthand property (just tried it)... weirdness. I'll send you a pm.
Nope, codepen still works with only specifying one position like background-position: top left;... or center. If I check the positions variable it appears that internally the one position is converted to a position for each background image anyway.
background-position: top center; for 4 background images gives positions == '50% 0%, 50% 0%, 50% 0%, 50% 0%' (though that could be platform dependent)
My project is evolving, along with my knowledge and understanding. As I originally created the Parallax effect with one DIV and 4 background images ... which now works, thanks to CrocoDillon's clarification on the array vs single values ... it turns out that I cannot dynamically alter the Opacity of any single image since (you guessed it) Opacity is only a property of the DIV. So, I'll need to move to a parent DIV with 4 child-DIVs inside it.
Whilst I already have that minor change working, the issue is now the behaviour of how the images sit inside the parent DIV. Using a background image approach, I liked the way "top center / auto auto" caused the images to remain centered, in any browser width and/or device. With the multi-layer approach, the images don't budge as the browser width is shortened. I presume that I have the CSS incorrect which has top: 0px; left: 0px; width: 100%.
I'll start with my bottom-line question: As of 2013-March, is jQuery able to manipulate CSS attributes of any image defined as a Multiple Background for a given DIV?
Thus far, I believe the answer to be "no".
I am using the approach defined at http://css-tricks.com/stacking-order-of-multiple-backgrounds/
The stacking works perfectly ... but now I want to individually manipulate the layered backgrounds, by dynamically altering their vertical position as the page is scrolled up/down.
Unless I am doing something wrong, jQuery is unable to reference the individual images ... but, rather, affects the entire DIV (all images).
I also referenced the following Microsoft article which seems to indicate that this is possible: http://msdn.microsoft.com/en-us/hh867822.aspx
Any insight would be appreciated.
Hey...WTF?
I'm still LMAO xD
Anyway, it's possible: http://codepen.io/CrocoDillon/pen/ukotd :)
@Paulie_D - I apologize but assure you that I AM the original "Paulie D" ... long before that retard from Jersey Shore prostituted my good name all over God's creation :)
@CrocoDillon - Thanks very much for the example. While it works in the Codepen, my implementation is producing the following error:
TypeError: element.css is not a function
At this line: var positions = element.css('background-position').split(',');
It might help if I clarify some details:
Crap - this forum sucks for pasting code. I will try using Codepen and update this post afterwards.
@CrocoDillon - I figured out my issue, after spending too much time trying to find a neutral place to upload my images for use in Codepen. I tried SkyDrive but this doesn't allow for direct access to images, as well as Flickr which altered by transparent PNGs to JPGs. CRAP!
My issue was that I needed to use the background shorthand!
This DID NOT work:
background-image: url(http://yada.ya/1.png), url(http://yada.ya/2.png), url(http://yada.ya/3.png), url(http://yada.ya/4.png); background-position: top center; background-repeat: no-repeat; background-size: auto auto; background-origin: content-box; background-color: #000000;
This WORKED: background: url(http://yada.ya/1.png) top center / auto auto content-box no-repeat, url(http://yada.ya/2.png) top center / auto auto content-box no-repeat, url(http://yada.ya/3.png) top center / auto auto content-box no-repeat, url(http://yada.ya/4.png) top center / auto auto content-box no-repeat #000000;
THANK YOU so very much. I would like to send you $25 USD for your assistance - let me know how to best accomplish that. I also liked your work on Codepen - keep up the great work.
Glad you figured it out :) On a side note, in the codepen it still works without using the shorthand property (just tried it)... weirdness. I'll send you a pm.
You need to repeat all of the parameters for all of the backgrounds, I think that's why the top bit of code didn't work
Nope, codepen still works with only specifying one position like
background-position: top left;... or center. If I check thepositionsvariable it appears that internally the one position is converted to a position for each background image anyway.background-position: top center;for 4 background images givespositions == '50% 0%, 50% 0%, 50% 0%, 50% 0%'(though that could be platform dependent)@Mottie, @CrocoDillon is correct. That fact is clarified at W3C here: http://www.w3.org/TR/css3-background/#layering
My project is evolving, along with my knowledge and understanding. As I originally created the Parallax effect with one DIV and 4 background images ... which now works, thanks to CrocoDillon's clarification on the array vs single values ... it turns out that I cannot dynamically alter the Opacity of any single image since (you guessed it) Opacity is only a property of the DIV. So, I'll need to move to a parent DIV with 4 child-DIVs inside it.
Whilst I already have that minor change working, the issue is now the behaviour of how the images sit inside the parent DIV. Using a background image approach, I liked the way "top center / auto auto" caused the images to remain centered, in any browser width and/or device. With the multi-layer approach, the images don't budge as the browser width is shortened. I presume that I have the CSS incorrect which has top: 0px; left: 0px; width: 100%.
You're moving the child divs or the background-images inside the child divs?