Forum | Appery.io

I've made the header transparent and blurred using this style:

pre.ui-header {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
-o-filter: blur(20px);
-ms-filter: blur(20px);
filter: blur(20px);
opacity: 0.4;
}/pre

This works but it blurs all the header.
I'm just wanting to blur the background of the header, not the header title, buttons and images.

how would I apply the code above to just the background?

Hi Joe -

Have you tried this solution: https://devcenter.appery.io/documenta...

I looked there but couldn't find a solution to what I want to achieve

Hi Joe,

Filter css style affects on whole container including all child elements.

Thus you can not implement what you want in this simple way.

But you can dynamically add some container with blured background in the header element.

Please read more about approach here: http://jordanhollinger.com/2014/01/29...

Regards.

Thanks I will look into it shortly