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"/>


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 {



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?

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