Random background graphic

[Spinethetic]

I have used previously mentioned layout on a site, I have the JPEG header graphc loaded by the background: (header1.jpg); but I have 15 other jpeg graphics that I would like to randomly into this rule. How would it be done? I know how it can be done using plain javascript but the graphic is loaded by an external global CSS file and Ivenever integrated javascript with CSS as of yet.

Best Regards
~Spine

[ddadmin]

Well CSS is static, so you can't implement any sort of logic in it, such as change the background image randomly. The easiest way is to use JavaScript unfortunately, by dynamically writing out the CSS that pertains to the background image. Here's a JavaScript that does something similar.

[Spinethetic]

Well CSS is static, so you can't implement any sort of logic in it, such as change the background image randomly. The easiest way is to use JavaScript unfortunately, by dynamically writing out the CSS that pertains to the background image. Here's a JavaScript that does something similar.

I see, but wouldent there be a way to have the random background script and then for the rule type background-image: url('+backgr+'); ?

[mwinter]

Well CSS is static, so you can't implement any sort of logic in it [...]

True, but other languages like PHP and ASP can be used to implement what the OP wants quite simply, though it's overkill to have a whole style sheet change just for a different background image. What would be better is to change the link to the image itself to something like

  http://www.example.com/images/random

where 'random' is actually a script (you may need to add an extension, like .php, depending on your server configuration). From a list, this script then chooses and redirects the client to an image at random. The script could also return the image data itself, but a redirect would allow the image to be cached with zero effort.

Mike

[ddadmin]

I see, but wouldent there be a way to have the random background script and then for the rule type background-image: url('+backgr+'); ?

Certainly you can use JavaScript to write out the background-image CSS property dynamically, but that would be using JavaScript, which you mentioned in your initial post you didn't want...

[ddadmin]

True, but other languages like PHP and ASP can be used to implement what the OP wants quite simply, though it's overkill to have a whole style sheet change just for a different background image. What would be better is to change the link to the image itself to something like

**http://www.example.com/images/random

where 'random' is actually a script (you may need to add an extension, like .php, depending on your server configuration). From a list, this script then chooses and redirects the client to an image at random. The script could also return the image data itself, but a redirect would allow the image to be cached with zero effort.

Mike

It's true you can use PHP or ASP for example to dynamically generate the CSS file, but then again, you can do so for any HTML on the page. I don't think the OP has access or to the knowledge needed to do this, but is looking for a pure CSS method.

What would be better is to change the link to the image itself to something like

http://www.example.com/images/random

where 'random' is actually a script

That's an interesting idea, and I think comes as close to static CSS as the OP is looking for. But the easiest way remains just to use JavaScript to write out the background-image property I think.

[Twey]

I have used previously mentioned layout on a site

a) Previously mentioned where, exactly?
b) On your page (http://www.operation911.5gigs.com/therevolutionist/), in Firefox at least, what looks as though it ought to be a footer, isn't.

[Spinethetic]

a) Previously mentioned where, exactly?
b) On your page (http://www.operation911.5gigs.com/therevolutionist/), in Firefox at least, what looks as though it ought to be a footer, isn't.

What do you mean? Could you take a screenshot? This is what it should look like :

[Twey]

Screenshot (warning: 1.7MB).
I don't know whether it's to do with my browser (Firefox 1.0.7) or my resolution (1600x1200), but it definitely doesn't display properly.

[mwinter]

Screenshot (warning: 1.7MB).

Eek. Why not a heavily compressed JPEG?

I don't know whether it's to do with my browser (Firefox 1.0.7) or my resolution (1600x1200), but it definitely doesn't display properly.

I would say your specific rendering is a result of your resolution, but it is broken: see the (slightly shrunk) attachment.

On an unrelated note, the navigation items have no background colour and become effectively invisible with images disabled. Background images should always be paired with a background colour.

Mike