Member Avatar for James_43

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
  • 680 Views
  • 57 Seconds Discussion Span
  • Latest Post Latest Post by James_43
Member Avatar for James_43

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.