CSS Help with Cornerstone builder and custom animation positioning / coloring

[Pbalazs89]

Hi there,

I’m building a staging site for which I am using some custom JS animations. If possible, I would just like to ask for some CSS help that I’m unable to figure out.

http://staging.ethermedia.hu/

1. In the header, I’m trying to add a Ken Burns animation, which I sort of was able to do, but the header is not contained, and the whole header area shrinks in the bg, not just the bg.emphasized text How would you go about fixing this?

2. In the middle of the page, I have a What We do Section with a Gradient background. I noticed that these angle out elements are svg-s, how can I give a gradient to these as well so they look similar?

3. I have a separate animation at the bottom of the content page (white waves). I’m trying to place some content on top of it, I tried fixing it with z-index, position:relative, absolute… can’t seem to be able to. What am I doing wrong?

Thanks for the help!!

[rad]

Hi @Pbalazs89,

Thanks for reaching out.

1. The sizing of the #large_header always remains at 700px regardless of the screen size. Please make it bigger or remove it so the content will not be restricted to it. I also recommend not limiting your header bar to 200px if you wish it to expand, like setting it to auto.

2. Unfortunately, it’s not currently possible since they are SVG elements. I tried it with CSS and it’s only limited to solid color. Gradient color is only possible within SVG structure (eg. <linearGradient>)

3. You should apply the z-index directly the content of your raw element, it’s because it’s the one that has absolute position. Example <div class="waveWrapper waveAnimation" style="z-index: -1;">

Hope this helps