I've been trying to add blur effect to my posts but only thing that gets blurred is the main post content (pic: http://i.gyazo.com/9d94d2be5dc3f3ada982564aa212336e.jpg). Any idea how to target the background-image, instead of the content?
The code I am using at the moment is:
<script type="text/javascript">
var image = document.querySelector('.post-body img').src;
var target = document.body;
target.style.backgroundImage = "url(" + image + ")";
target.style.backgroundSize = "cover";
document.body.style["background-attachment"] = "fixed";
</script>
I have a odd feeling that you need to make the actual background image into standalone element but I have no idea how.
Also, is there a possibility I could add Blur.js into blogger or is it only for Wordpress? If yes, I'd like to know how?
Thanks in advance.
I worked on this and saw this question. So here's a suggestion.
<script type="text/javascript">
function showBackground() {
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundImage = "url('http://backgroundImage.jpg')";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundPosition = "center center";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundRepeat = "no-repeat";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundAttachment = "fixed";
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(5px)";
}
window.onload = showBackground();
</script>
Explanation
As I used the simple template at this time, I noticed that the standard template has a class named body-fauxcolumn-outer which is used to set the background color.
So I adapt my answer here to answer this question.
I just added the following to fix the blur as you can see in the image bellow.
document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(15px)";
You could try use this CSS 3 tag:
filter: blur(5px);
You can see the mdn documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
You can do this on Blogger without using any JS or CSS.
Upload your image into a Blogger post as if you want to put it in an article.
Copy the URL of the image and paste it into the body css like so:
body {
background-image: url('YOUR IMAGE URL HERE');
}
Replace the /s-1600/ part of the url with /s1600-fcrop64=1,000f0000ffceffff:Soften=1,20,0/
Note: You can adjust the radius of the blur by fiddling with the second number after Soften=(in the case above, 20).
The advantage of doing this is it's lighter on code and completely compatible with every device and browser that is capable of loading an image!
Related
I am currently working on making an element progressive load so make the loading of hero banners more fluent, I came by this code example:
Codepen
The one I can't seem to understand is how the placeholder image is being switched to the original image.
The javascript does not seem to refer to original image at all?
So how does it render it?
I am currently getting a white screen when I use the javascript, which makes sense as the blurred image becomes more opacity =1 =>
$(function(){
$('.progressive-image').each(function(){
var image = new Image();
var previewImage = $(this).find('.loadingImage');
var newImage = $(this).find('.overlay');
image.onload = function(){
newImage.css('background-image', 'url(' + image.src + ')');
newImage.css('opacity', '1');
console.log('complete');
};
image.src = previewImage.data('image');
});
});
So how does this codepen blen the original image in and the blurred image out?
the tag which newimage finds does not contain the image? so even more confusion?
This is a little confusing but the code doesn't actually remove the old image. It inserts a new image into <div class="overlay"></div>, which overlays the 'loading' image in <div class="loadingImage"></div>.
Look at your Elements tab in inspector and you'll be able to see both of these.
How does this work?
More specifically the script grabs the 'full res' image url from the data-image tag in the loading-image div.
<div
class="loadingImage"
style="background: url('https://res.cloudinary.com/sourcetoad/image/upload/v1483582294/frog-2-sm_zjphps.jpg')"
data-image="https://res.cloudinary.com/sourcetoad/image/upload/v1483582295/frog-2-lg_vahxhg.jpg">
</div>
It grabs the data-image with:
image.src = previewImage.data('image');
Then it inserts it as a background image into the overlay div with:
newImage.css('background-image', 'url(' + image.src + ')');
It's kind of a funky example to look at, I got a bit lost in it as well.
newImage.css('background-image', 'url(' + image.src + ')');
This line of code sets the image on the <div class="overlay"></div>
Overlay is actually the real image, not the blurred image.
The Blurred Image is set with an inline style on <div class="loadingImage>
I have to admit I'm not a huge fan of what this codepen is doing, but that's how it is working.
One tip for picking something like this apart, start commenting out javascript lines to see how it works before the JS takes over.
I hope this helps.
I’m quite new to jQuery and JS and been asked to write a script that will be loading background-image progressively - I mean that low quality image should appear immediately and when full size image is loaded should replace the small one.
I found some tips how to do something similar by layering <img /> on top of background-image however in my case i have to deal with background-image only, so I have made this:
$('.img-loader').each(function(){
var box = this;
var smallImg = $(this).attr('style');
var bigImg = smallImg.replace('.jpg)', 'big.jpg)');
var imgUrl = bigImg.replace('background-image: url', '');
var imgUrlS = imgUrl.replace(/[{()}]/g, '');
console.log(imgUrlS);
$('<img/>').attr('src', imgUrlS).load(function(){
$(this).remove();
$(box).attr('style', bigImg);
});
})
The script basically does the job but in that moment when the image gets replaced there is a quite noticeable ‘shake’.
Any ideas how to make transition smoother or anyone knows what causing this 'shake'?
Edit: As suggested I'm adding a markup snipped of where script has to be applied.
<div class="about__section__bgimage img-loader"
style="background-image: url(<?php echo $contentBlock->imageurl ?>)"></div>
I suggest you create two separate elements with the same size, overlapping each other, with position: absolute; make one of them visible with the original bg image (using opacity: 1). The second one invisible (using opacity:0)
Once the higher quality image is completely loaded, set the opacity of the original image to 0 and the new image to 1.
use a css transition on the opacity property to make the opacities change smoothly.
you have to use animation for this. Use any of them according to your scenario enjoy it !!!
https://daneden.github.io/animate.css/
I tried but couldn't get it done.
I want the background of a div to cover full page according to the device width and it should change each time when page is load or refresh on same system.
I have tried many codes but none of them works for me.
Now the script that i am using is:
<script type="text/javascript">
window.onload=function(){
var thediv=document.getElementById("image");
var imgarray = new Array("../bgimages/1.png", "../bgimages/2.png", "../bgimages/3.png");
var spot =Math.floor(Math.random()* imgarry.length);
thediv.style.background="url("+imgarray[spot]+")";
}
</script>
The HTML code is as follows
<html>
<body>
<div id="image">
<div class = "container">
</div> <!--container ends-->
</div>
I want #image div background to cover full page.
This is the CSS i am using:
#image
{
width:100%;
height:100%;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
Here is the link of the page: http://sahibfreelancer.hostzi.com/
No background image loading.
Please if i miss anything you can let me know. I hope i gave enough details. I am trying this from last one day.
Will be looking forward to your responses.
I spotted a typo :
var spot =Math.floor(Math.random()* imgarry.length);
... should be ...
var spot =Math.floor(Math.random()* imgarray.length);
... shouldn't it ? Does it work if you edit that ?
Since you have jQuery in the tags, I'm going to assume you're using jQuery.
But that being said you're not using the $ syntax in your code examples.
Here's how you can set the background with jQuery:
$('#image').css('background-image', 'url(' + imageUrl + ')');
Edit:
Looks like Ashugeo got it. Next time check the console for the output of your script, it would have been throwing an exception.
Also, if you are using jQuery, there's nicer ways to do what you're doing.
To make the image occupy the entire screen you can specify the viewport height in css like this #image {height:100vh}
Now for the javascript code everything looks fine to me if the images are in the specified url it should load them randomly. You can see a example here.
the only thing i've done is load the images over the web since i cant access them locally on fiddle. A different Image is loading every time.
As for the page load i've used a immediately invoking function which will fire when the contents are loaded but you can use onload as well.
I think its the path of your images.
I pasteD your code and change the url and it works http://jsbin.com/pozadujeca/edit?js,console,output
I am new to javascript, but I am currently using javascript in my head tag that changes images randomly on page refresh. This has been working great. The javascript can be seen below.
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
Now I want to take it one step further and make the images responsive. I've tried a number of different tags via media queries, but nothing seems to work 100%. This particular page has a top section with a height of 310px, which is also where the images are displayed - they also have a height of 310px. Is this something I can do with CSS or CSS3? Or will I need to add additional javascript?
Thanks for the help in advance... my brain hurts!
I have a question that's somewhat of an extension of this thread.
I have my background images working; however, instead of having them tile automatically, I would like to link them to scale to the browser. I know how to create a scalable background image using CSS, but I don't know how to link said CSS to the backImage variable in the script (available below, or after the jump from the previous thread) so that it applies to all of the various images.
<script type="text/javascript">
var backImage = [
"images/street.png",
"images/market.jpg",
"images/building.jpg",
"images/skyscraper.jpg",
"images/gasstation.jpg",
"images/trees.jpg"
];
function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
}
};
</script>
The tricky part is I can't apply the class to the HTML because I'm already applying this...
Change
...to an existing div in the HTML with multiple other classes; hence I need to add the class to backImage or the specific pngs and jpgs in the javascript.
Thanks in advance!
A friend helped me solve my problem. Here goes:
<script type="text/javascript">
var backImage = [
"images/vintagemap.png",
"images/earbuds.jpg",
"images/flames.jpg",
"images/grass.jpg",
"images/library.jpg",
"images/shapes.jpg"
];
function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
document.body.className = 'bgchange';
}
};
</script>
I added the line "document.body.className = 'bgchange';" below my original JS, then wrote the following CSS class:
.bgchange {
background-repeat:no-repeat;
background-size:cover;
}
It will now resize any photo to a scalable, full-screen background image.
Hopefully someone else finds this helpful!
as part of your changeBGImage() function, you could make additional .style. changes to document.body to do whatever you like to each background image as it changes.
EDIT:
Essentially, take this:
function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
}
};
And turn it into this:
function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
document.body.style.backgroundSize = '###px';
}
};
Or, if you want to set some CSS other than background-size on the body element, you would do that after the .style. parameter instead. Just remember, when translating CSS to JS, hyphens are removed and the next letter is capitalized (just like background-image in CSS becomes backgroundImage in JS)