Joe Krump 2015-04-07 20:19:45
So cool. I think I'm going to use this for a personal site that I'm working on. Thanks for sharing!
maxsurguy 2015-04-07 20:27:48
You're welcome! Enjoy!
shiva 2015-05-13 06:26:05
hey could you now how to connect online chating
Michael Kjeldsen ツ 2015-04-08 08:00:12
Performance-wise, how does this setup shape up?
maxsurguy 2015-04-08 16:31:45
well, you basically eliminate using additional image for the blurred background, so my guess is anywhere between 50-100 kb for 3 images and reducing the number of network requests. The JS script for this is about 2k minified so there's definitely a big advantage for using the technique but keep in mind that images have to be on the same domain for this to work in all browsers down to IE 9
angelxmoreno 2015-04-15 18:15:34
So the CSS handles taking the image in the order that they are placed in the HTML to place the profile pic and the blur? Also, how did you make the base64 string of the image?
maxsurguy 2015-04-27 22:26:40
The base64 strings are not the best way of having the image but you can use something like base64-image.de
to encode. The best way is of course to host the images on the same domain as your website using this script - that way they will be optimal.
Damien O'Neill 2015-05-15 13:03:49
Damien O'Neill 2015-05-15 14:08:24
I updated Bootstrap to 3.3.4 but the background image is not loading for some reason. The JS is loading, no console errors and avatar images are loading, just no background images. Can you think of what might be happening or missing?
Damien O'Neill 2015-05-15 15:02:18
...just an update. I had been using my own image backgrounds without the class of src-image. When I added you images back in, they worked. When I left it as my images, I got an error stating Cannot access local image. The image is on the same site as the code, so I am a little stumped as to why this is happening.
maxsurguy 2015-08-17 05:17:09
Hello! I have invented a better way to do this :) Check out my new plugin that solves that issue you're having: http://msurguy.github.io/ba...
Cassia Nicole 2015-06-02 16:15:01
So the background image isn't blurring can anyone help me figure out why?
Wesley Smith 2015-07-01 10:29:02
Very nice snippet, thank you. I forked it at http://bootsnipp.com/user/s...
and tweaked it a bit to allow you to use images hosted on any domain via a small php script.
jhonny nanana 2015-09-11 17:35:11
Very nice snippet
jhonny nanana 2015-09-11 17:36:40
He Who Asks 2016-01-19 16:32:04
I do not see them blurring when I interact with the box (image, button, box)
Commenting will be back soon.