[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