In Agency Pro and Metro Pro when a background image has been set via Appearance > Background, as the various pages are navigated to in the site, the background image will fade in with a splash. If you would like to disable this effect, edit js/backstretch-set.js and change
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $("body").backstretch([BackStretchImg.src],{duration:3000,fade:750}); |
to
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $("body").backstretch([BackStretchImg.src]); |
Hey Sridhar,
how i can remove the hover effect completely? For example to get the image in the background just by clicking on the links of my site? I removed the splash effect but the site is further in color before it changes to the image …
Thanx
Torben
Hi Torben,
Did you manage to completely disable the colour splash?
how to change width between home middle left and home middle right in metro pro theme??…its really imp.Nyc article btw.
Hey Sridhar,
The splash is still there even after making the said changes. Is there another way of completely removing it?
Regards,
Ernest
I thought the fix wasn’t working either, but it’s not the code that’s actually the problem.
It’s more the colored background that is loaded first before the picture comes into view.
So you can use the solution provided above if you don’t want the fade in effect, but to get rid of the colored flash you need to modify the css.
I changed my css to looke like this. I set the background color to white. Now it’s beautiful =)
body.agency-pro-orange {
/* background-color: #f07802; */
background-color: #fff;
}
[…] found several topics in the forums discussing the fix and most pointed to this post (now a paid blog). However, it was wasn’t addressing the problem. It was removing the fading […]
What if you don’t want it to flash at all? No color, nothing.
How can we achieve THAT outcome?
In Agency Pro if you do not want the yellow background color to appear for a brief moment before the background image loads, in style.css remove
background-color: #d7c603;forbodyelement (line 148).