image preload to use as background-image
Theres great tutorials out there which show how to load an image in the background and then fade the image in when ready.
I have this working fine, and I can append the preloaded image to a hidden div then fade the div in for a smooth effect.
Problem is I want to set this preloaded image as a css background image, not as a <img /> in a container. But if when the image is loaded, instead of
.prepend()
I do
.css()
and set the css property of a background-image to be the preloaded images URL, then when it carries on with displaying it the browser loads the image again. Rather than using the preloaded one.
How can I get round this?
I want the image to be a background image as I want it centered in the page background, even if it is too large for the viewport.