0

Hi all,

I am tying to have a page header transparent with the background blurred behind it. So far, for some reason, the blur overlay is only blurring the logo in the header, but nothing else??

my HTML is:

<div class="overlay-blur">
<div class="page-header">

<img src="http://test.com/wp-content/uploads/2015/11/Strong-Links.jpg" class="logo"/>

</div>
</div>

And CSS:

div#page {
    height: 1000px;
    background-image: url('https://joyreceived.files.wordpress.com/2012/08/p_aurora_detail_full.jpg');
}

div.page-header {
    margin: 0px;
    background-color: rgba(255,255,255,0.5);
}

div.overlay-blur {


    left:0;
    right:0;

    filter:blue(4px);
    -o-filter:blue(4px);
    -ms-filter:blue(4px);
    -moz-filter:blue(4px);
    -webkit-filter:blur(4px);
}

nav.navbar-default {
    background-color: rgba(255,255,255,0.5);
}

/*Page Logo*/
img.logo {
    margin-top: 10px;
    margin-left: 20px;
    height: 100px;
}

I think perhaps the nature of the blur is that it only blurs certain object - and maybe does't recognise the background image I have on the page?

1
Contributor
1
Reply
5
Views
2 Years
Discussion Span
Last Post by James_43
0

Ah - please ignore the 'blue' typo! That's not the reason this isn't working

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.