CODEWITHSUNDEEP
javascriptjqueryhtmlcss
krivar
krivar

Reputation: 402

jQuery: Backstretch with Blurjs

I'm using Backstretch to display my background image. Then I want to use Blur.js to have elements blur the background. Using blur.js on the backstretched image doesn't work. I assume it is because Blur.js uses the CSS property background-image and Backstretch just displays the image with .

How do I make these two compatible? The code inside of these plugins is pretty complicated.

Upvotes: 0

Views: 735

Answers (1)

joost
joost

Reputation: 6659

This might do what you need (not using blur.js). Just adding some CSS blurring to the div backstretch creates.

<style>
    div.backstretch {
      -webkit-filter: blur(5px);
      -moz-filter: blur(5px);
      -o-filter: blur(5px);
      -ms-filter: blur(5px);
      filter: blur(5px);

      margin: -10px; /* Added to get rid of white blur borders */
    }
</style>

Upvotes: 1

Related Questions