1

I recently switched over to using Ghost for my blog and by default I'm using the Casper theme. What I'm trying to do is blur the site-head header, by styling the CSS using -webkit-filter: blur, but when I do this, every other element also becomes blurred.

I've tried adding custom style attributes to each other element like -webkit-filter: blur(0px) !important in an effort to override the site-head blur, but nothing changes. I've also tried adding and blurring a separate element in between the header and the start of the first div leading into the other elements, but this ended in the same result.

I'm pretty new to CSS and Javascript and can't help but think I'm just completely overlooking something here.

This is the index.hbs:

<header class="site-head" {{#if @blog.cover}}style="background-image: url({{@blog.cover}})"{{/if}}>
    <div class="vertical">
        <div class="site-head-content inner">
            {{#if @blog.logo}}<a class="blog-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="Blog Logo" /></a>{{/if}}
            <h1 class="blog-title">{{@blog.title}}</h1>
            <h2 class="blog-description">{{@blog.description}}</h2>
        </div>
    </div>
</header>

And here is the style for the site-head:

.site-head {
    position: relative;
    display: table;
    width: 100%;
    height: 60%;
    margin-bottom: 5rem;
    text-align: center;
    color: #fff;
    background: #303538 no-repeat center center;
    background-size: cover;
}
user3368040
  • 11
  • 2
  • see for a wrokaround: http://stackoverflow.com/questions/13168142/is-it-possible-to-use-webkit-filter-blur-on-background-image – A. Wolff Mar 01 '14 at 11:40
  • I don't have a problem blurring the `background-image`. I have a problem blurring the `header` `background-image` along with every thing else. I don't understand what you do in that other question, would you please elaborate? – user3368040 Mar 01 '14 at 11:45
  • In fact, you should use pseudo element `:before` and filter it, not directly the HEADER. If you apply filter on HEADER, filter is inherited for all children and you can't reset it. See here: http://jsfiddle.net/juanojeda/T5j6H/1/ You could of course change your HTML markup by adding an element to HEADER and use filter effect only on it – A. Wolff Mar 01 '14 at 11:50
  • So, you're suggesting to use something like `.site-head:before` to apply the blur, is that right? – user3368040 Mar 01 '14 at 11:56
  • Ya, that's what i suggest if you don't want to change HTML markup – A. Wolff Mar 01 '14 at 11:59
  • So, I learned that you can't reference pseudo elements like `before` with jQuery, which is something I need to do. One last time, you've been really helpful. When you mention changing the HTML, do you mean adding an element in between the `header` and `div` `vertical`, then applying the `background-image` to that one? – user3368040 Mar 01 '14 at 12:22
  • Ya, exactly what i mean – A. Wolff Mar 01 '14 at 12:26

0 Answers0