Is there a way i can force my site to load my main background image before it load all the small images on my site? i know in IE it seems to be fine , but in FF it load the background image at the end.
Those images referenced nearest the top of the HTML will start loading first.
Background images since they are only referenced from the CSS will not even start to load until after the CSS has loaded.
How quickly the images will load once they start will depend on how big they are, where they are loading from and what other files are loading at the same time.
About the only way to make it more likely that the background will load first is to have it cached on their computer before starting to load the current page so that it is immediately available when called for.
One option - although a somewhat ugly one - might be to set the background image in a <style> definition in the head of the page, before style sheets and js files are declared. That way the background image would be the first file the browser requests from the server and if it’s not too big, it has a good chance to load before the other images that are declared in the style sheets and on the page.
myimage = new Image(422,156); // width, height
myimage.src = "image.jpg"; // you will need to include the full url here i think
Try that out and see if it works.
There are so many ways. here is another by css.
alt=“Clara at 8 weeks” title=“Clara at 8 weeks”
height=“350” width=“350” class=“hiddenPic”>