Positioning shapes on the backgroud of a webpage randomly using CSS

[d|b]

Hi there,

I would like to have a few 2d coloured shapes that are placed randomly on the x and y axis of the back ground of this website:

http://www.acloud.tumblr.com

Every time the page loads, the shapes are positioned and (maybe also rotated would be even better) at random co-ordinates across the screen.

This would obviously be happening in a layer below the main content, which would be unaffected by this movement

I was thinking that maybe some javascript for the randomiser and CSS for the positioning could do the trick. Any specific ideas on how I might be able to do this?

Thanks

 

[GravyMonster]

The javascript for this would be quite easy, just pick a random number between 0 and screen.width/height (or a specific area of the page) for the x and y position on page load, and set this as the css positions for the absolutely positioned image.

Rotation isn't possible though using the standard HTML image element and CSS however.

 

[Dj_Jestar]

Use background-images, and no-repeat. Then use percentages for background-position.

e.g.:

echo "background-positon: " . rand(0, 100) . "% ". rand(0, 100) . "%;";

or JS:

var elem = document.getElementById('foo');
elem.style = "background-position: " + Math.floor(Math.random() * 100) + Math.floor(Math.random() * 100);

or similar (I haven't tested it.)