Say there is a css style declaration to an element which has been set display:none (not displayed on screen) and it also has a background image set.
Lets say this element is displayed on an event such as a mouse click. Would the browser load these images even before the element is displayed? Is this load behaviour consistent across browsers?
It is not loaded automatically but you can use a Javascript trick to preload an image.
pic = new Image();
pic.src="http://url/imagetoload.png";
As a better solution, you may create a div with a negative positioning value (such as left: -1000px) and assign imagetoload.png to its background to load the image.
No, browsers I've tested before do not.
if you do want to load the image, try using background-position: -1000px -1000px which does work. It won't show the image, but it will be preloaded. However, the element will be in the normal flow, i.e. not hidden.