CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mrpinkman
mrpinkman

Reputation: 211

Blur the background without filter

I'm making a website and I have this code that blur out the background:

CSS

#background{ 
    background: url(img/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    min-height: calc(100% - 96px);
    -o-transition: all 750ms;
    -moz-transition: all 750ms;
    -webkit-transition: all 750ms;
    transition: all 750ms
}

.covered{
    background: url(img/bgb.jpg) no-repeat center center fixed!important;
    -webkit-background-size: cover!important;
    -moz-background-size: cover!important;
    -o-background-size: cover!important;
    background-size: cover!important;
}

jQuery

$('.overlay,.ov').click(function(){
    $('#background').addClass('covered');
}

HTML

<div id="background">
    //content of my page
</div>

I tried:

-Using blur filter but the content blurs out too.

-Using a sprite but since my backgrounds needs to be centered it appears the top part normal, and the bottom part blurred.

My current code works great but the image has to load and when you click overlay/ov the background turns white until the new blurry background fully loaded. Any sugestions?

Upvotes: 1

Views: 1314

Answers (2)

Frax
Frax

Reputation: 5865

You may try forcing browser to download image by creating Image element, either in html or in javascript. Try adding

<img src="img/bgb.jpg" style="display:none">`

to html or 

var bbg = new Image();
bbg.src = "img/bgb.jpg";

to javascript. It doesn't have to be shown anywhere to force resource download. In facts, even bare new Image().src = "img/bgb.jpg";, without any var, should be enough.

When you switch the background with css, blurred image will be already loaded into browser's cache and should show immediately.

Upvotes: 1

lxe
lxe

Reputation: 7599

The only way to do this is to hack together something like this:

<div class="wrapper">
  <div class="background"></div>
  <div class="content"></div>
</div>

Then adjust the positioning of the background:

.background {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
}

Upvotes: 1

Related Questions