[thelist] generating random image in css

ben morrison morrison.ben at gmail.com
Thu Jun 9 03:47:55 CDT 2005


On 6/8/05, Pringle, Ron <RPringle at aurora-il.org> wrote:
> I have a header div that contains a banner image set as a background image
> through CSS. The image is set in the background in order to allow it to grow
> or shrink to meet the viewer's viewport size.
> 
> Is there any way to randomize that background image so that a new image
> appears when the page is loaded/reloaded? I use ASP/VBScript on the site.

you could setup say four different background images in your css and a
class for the properties:

randImg {
background-repeat:none;
background-position: 100% 0;
background-color:#000;
}

imgOne {
background-image: url(imageone.jpg);
}
imgTwo {
background-image: url(imagetwo.jpg);
}
imgThree {
background-image: url(imagethree.jpg);
}
imgFour {
background-image: url(imagefour.jpg);
}

You could then setup an array for your images. 

imgArray = ["imgOne", "imgTwo", "imgThree", "imgFour"]

then use ASP to choose a random image from the array store it in randNumber.

and write the class into the page:

<div class="randImg <%= randNumber %>">

I dont know ASP so you'll have to excuse the code.

ben


More information about the thelist mailing list