Awesome responsive parallax background
# March 18, 2013 at 4:26 pm
I ‘m fiddlin around with this Codepen I partially made ;)
[This](http://www.jquery4u.com/animation/jquery-parallax-tutorial/ “Parallax background!”) tutorial covers the basics I need to achieve my result. So I ripped some code and tried putting my stuff together. The sad thing is, that it doesn’t work anymore in Codepen. Obviously I’m doing something wrong, copied and pasted to easily I guess…
What I first would like to see is that the Codepen that I made which you can view [here](http://codepen.io/anon/pen/xoeKJ “Codepen”) works again. The orbs wont move! The second thing is that the orbs are aligned in perspective (had no idea how to put that in the right words :p) . I want to create that dimensional feeling. As if the orbs are in a real space, the one more distant than the other.
If you guys can help me out with these 2 small things we’ll have a awesome piece of code to be shared. Endless possibilities ;)# March 21, 2013 at 11:21 am
[Here](http://cdpn.io/lwuDd “Fixed pen”) is what I’ve done to fix the first issue. All I did was uncomment the position:relative and gave #parallax a fixed width and height.
Updated the pen I posted yesterday. This has been quite a learning experience :). I troubleshooted and found that the height of 100% was what was breaking everything. Google led me to this bit of knowledge:
“An element with position:relative on the whole behaves in the same way a normal position:static element does. Therefore setting height:100% will have no effect unless the parent element has a defined height. In contrast absolute positioned elements are removed from the document flow so are free to adjust to whatever height their containing element currently has.”
So, #parallax is now absolutely positioned and everything should behave the way you intended.# March 22, 2013 at 1:34 pm
Looks better! Though the scrollbars are the last things we need to get rid of! But I’m glad to hear you got some expierence out of it ;) Tomorrow I’ll digg into it again. See what I can make of it. The gradients are terrible but I will replace them with nice smooth png gradients… Keep an eye on the pen!
You must be logged in to reply to this topic.