HTML Help

insomniac1845 · Joined: 17 Oct 2008 Posts: 6

I posted this in the CSS help forum, but it turned out to be a JavaScript issue.

I'm trying to get my page to load a random background image each time it is visited (or reloaded). I've seen a lot of people asking for just banners, but I want it to change the whole background.

I tried pure JavaScript:
Code: <script type="text/javascript">
document.write('<body background="/images/img_' + Math.floor(Math.random()*100 + 1) + '.jpg">')
</script>
where 100 is the number of images I have.

However, because the image is smaller than the whole window, it tiles the image. I went to the CSS forum to see if it could be done with styles, because I want the image set to no-repeat, fixed, and aligned in the top left corner.

Looking around online, I found many pages that use Arrays. This would work, but it's not very efficient for 100+ images.

All of my images are located in my image directory and each is labeled img_[number].jpg; i.e. "/images/img_4.jpg", ranging from 1 to 100.

insomniac1845 · Joined: 17 Oct 2008 Posts: 6

Alright, so I did a little experimenting:

Code: <html>

<head><title></title>
<style type="text/css">
body
{
background-repeat:
no-repeat;
background-attachment:
fixed
}
</style>
</head>

<script type="text/javascript">
document.write('<body background="/images/img_' + Math.floor(Math.random()*111 + 1) + '.jpg">')
</script>

</body>

</html>

This code works for what I wanted it to do. But now is there a way to change the background color? When I enter it in the CSS, it turns the image back to tiles.

digitalskratch · Joined: 28 Sep 2009 Posts: 1

Hey thanks for the script. It works perfect. Clean and simple!