Clever Geek Handbook

Blur.js - Blur the background with a different image

I've tested blur.js and it's a useful tool for blurring the background, but now I want to do something different, I want to blur the background, but with a different image, not just a fancy background color.

$('#Win_ventana').blurjs({
  source: 'body',
  radius: 5,
  offset: { //Pixel offset of background-position
    x: 0,
    y: 0
  },
  overlay: 'rgba(0,0,0,0.5)',
  cacheKeyPrefix: 'blurjs-', //Prefix to the keyname in the localStorage object
  draggable: true
});
$(".Texto-icon").dblclick(function() {
  $("#Win_ventana").fadeIn("slow").draggable();
});
      

        
        
        
      

    
body {
  background: url("http://www.sevenforums.com/attachments/tutorials/173429d1314981906-desktop-background-change-img0.jpg");
  /* http://www.sevenforums.com/attachments/tutorials/173429d1314981906-desktop-background-change-img0.jpg */
  background-size: cover;
  height: 100%;
  color: #000;
}
#container {
  margin-left: 10px;
  margin-top: 10px;
  position: absolute;
}
#Win_ventana {
  position: absolute;
  left: 200px;
  top: 50%;
  width: 800px;
  height: 500px;
  z-index: -2;
  display: none;
}
.Ventana_bg {
  background-image: url('http://puu.sh/hkWp6/c7830a2bb1.png');
  /* aero_glass.png */
  background-size: cover;
  background-repeat: no-repeat;
}
      

        
        
        
      

    
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://www.blurjs.com/blur.min.js"></script>

<div id="container">
  <div class="Texto-icon over">
    <p>CLICK ME !!</p>
  </div>
  <div id="Ventana_container">
    <div id="Win_ventana" class="Ventana_bg">
    </div>
  </div>
Run codeHide result


http://codepen.io/anon/pen/bdbZeE

This is what I want

Windows 7 wallpaper

Is there a way to achieve this using blur.js?

Fixed

$('#Win_ventana').blurjs({
  source: 'body',
  radius: 5,
  offset: { //Pixel offset of background-position
    x: 0,
    y: 0
  },
  overlay: 'rgba(0,0,0,0)', //Changed the 0.5 to 0 because Aero_glass.png has transparency already
  cacheKeyPrefix: 'blurjs-', //Prefix to the keyname in the localStorage object
  draggable: true
});
$(".Texto-icon").dblclick(function() {
  $("#Win_ventana").fadeIn("slow").draggable();
});
      

        
        
        
      

    
body {
  background: url("http://www.sevenforums.com/attachments/tutorials/173429d1314981906-desktop-background-change-img0.jpg");
  /* http://www.sevenforums.com/attachments/tutorials/173429d1314981906-desktop-background-change-img0.jpg */
  background-size: cover;
  height: 100%;
  color: #000;
}
#container {
  margin-left: 10px;
  margin-top: 10px;
  position: absolute;
}
#Win_ventana {
  position: absolute;
  left: 200px;
  top: 50%;
  width: 800px;
  height: 500px;
  z-index: -2;
  display: none;
}
/* Deleted .Ventana_bg */

#Win_ventana img {
  position: absolute;
  width: 100%;
  height: 100%;
}
      

        
        
        
      

    
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://www.blurjs.com/blur.min.js"></script>

<div id="container">
  <div class="Texto-icon over">
    <p>CLICK ME !!</p>
  </div>
  <!-- Added img instead of a class -->
  <div id="Win_ventana">
    <img src="http://puu.sh/hkWp6/c7830a2bb1.png"></img>
    <p>Random title</p>
  </div>
Run codeHide result


+3


source to share


1 answer


In your css add this code inside img 

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}


change the values ​​depending on the desired opacity

0


source






More articles:


All Articles