Random Background image, preload image using css

[SLM-why]

1) Is it possible to preload image using css? If yes, how?
Here is the format of my css....

body {
background-image: url(g9brk05.gif);
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 2px;
}

2) Is it possible to use random background image using css?........... How?

[ccoonen]

preloading: javascript can pre-load images. Just pre-load the img you are using in your CSS background.

Random bg Image:
you need to use some sort of css/altering language as in javascript or a server-side language. you could inline it and say:

<div id="bgImg" style="background:url(/images/thiscanberandomized.gif) no-repeat top left;">aaaaaaa</div>

to randomize it with php you would do

<div id="bgImg" style="background:url(/images/<?= "img_".rand(0,1000).".gif"; ?>) no-repeat top left;">aaaaaaa</div>

create 1000 images in your images folder called /img_1.gif, /img_2.gif etc..

[supriyadisw]

Originally Posted by ccoonen

preloading: javascript can pre-load images. Just pre-load the img you are using in your CSS background.

Random bg Image:
you need to use some sort of css/altering language as in javascript or a server-side language. you could inline it and say:

<div id="bgImg" style="background:url(/images/thiscanberandomized.gif) no-repeat top left;">aaaaaaa</div>

to randomize it with php you would do

<div id="bgImg" style="background:url(/images/<?= "img_".rand(0,1000).".gif"; ?>) no-repeat top left;">aaaaaaa</div>

create 1000 images in your images folder called /img_1.gif, /img_2.gif etc..

Thanks for your tips. How to make a general random images? I mean when we don't have 1000 images or more than 1000 images.

Thanks a bunch

[ccoonen]

just change url(/images/<?= "img_".rand(0,1000).".gif"; ?>) to however many images you have (make sure to make them in sequencial order)

so if you have 34 images - you would do url(/images/<?= "img_".rand(0,34).".gif"; ?>)

[supriyadisw]

Thanks for your help.

[SLM-why]

Thanks ccoonen!

I will try that.

[avanfleet]

I see that this solution works for PHP, but by changing the code to ASP.NET, should it also work?

[aplus]

for image preloading use the method illustrated here:
http://www.phpmysqlapache.com/