PDA

View Full Version : Random background graphic



Spinethetic
01-07-2006, 09:47 PM
I have used previously mentioned layout on a site (http://therevolutionist.net.tc), 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.:rolleyes:

Best Regards
~Spine

ddadmin
01-08-2006, 09:32 AM
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 (http://www.javascriptkit.com/script/cut176.shtml)that does something similar.

Spinethetic
01-08-2006, 07:02 PM
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 (http://www.javascriptkit.com/script/cut176.shtml)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
01-08-2006, 09:50 PM
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
01-09-2006, 02:25 AM
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
01-09-2006, 02:31 AM
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
01-09-2006, 04:19 PM
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
01-11-2006, 10:34 PM
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:o :

http://photobucket.com/albums/b400/Spinethetic/th_9c788c41.png (http://i23.photobucket.com/albums/b400/Spinethetic/9c788c41.png)

Twey
01-12-2006, 04:16 PM
Screenshot (warning: 1.7MB) (http://www.crystalinity.net/images/ss1.png).
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
01-13-2006, 01:46 AM
Screenshot (warning: 1.7MB) (http://www.crystalinity.net/images/ss1.png).Eek. :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

Twey
01-13-2006, 04:03 PM
Eek. :eek: Why not a heavily compressed JPEG?Because I have space to burn and I like to show off my desktop. Why else? :p

Spinethetic
01-13-2006, 04:13 PM
http://www.crystalinity.net/images/ss1.png

GOOD LORD!:eek:

I dont have mozilla, I have IE, so I cant code the css to work with mozilla, unless you want to help me:o , however refresh your screen because I altered the news section tabs/title graphics.

Best Regards
~Spine

Twey
01-13-2006, 06:09 PM
Still happens.

I dont have mozilla, I have IE, so I cant code the css to work with mozillaOf course you can. Get Firefox (http://www.mozilla.org/products/firefox/). If you're doing web design, you ought to have a collection of all the most-used browsers and some of the less-used ones to test in anyway.
No cracks about me and IE, please, John. I know you're thinking it. :p

Spinethetic
01-13-2006, 09:30 PM
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 (http://www.javascriptkit.com/script/cut176.shtml)that does something similar.
Is there one that would work for a DIV? It is being used as a header graphic right above the menu.

Twey
01-14-2006, 11:25 AM
That's not a very good script. Try this instead:

<script type="text/javascript">

var elementID = "divone"; // ID of element to change the background of, or "BODY" for body
var bgs = new Array(); // Possible backgrounds
bgs[0] = "background1.jpg";
bgs[1] = "background2.png";
bgs[2] = "background3.gif";

var rand = Math.floor(Math.random % bgs.length);

(elementID == "BODY" ? document.body : document.getElementById(elementID)).style.backgroundImage = "url(" + bgs[rand] + ")";
</script>Needs to go after the element whose background you want to change. Put it just before </body> and you'll be fine. Untested.

Alivia74
01-23-2006, 07:50 AM
I don't think the OP has access or to the knowledge needed to do this, but is looking for a pure CSS method.

Hmm... very strange.. we're also using knowledge but method are working fine. Anyway the problem is existing and should be fixed.





Denmark Cottages
(http://www.local-cottages.info/denmark-cottages.html) - Philadelphia flowers
(http://www.flowers-all-over-the-world.com/pennsylvania-philadelphia-flowers.html)

Spinethetic
01-25-2006, 07:53 PM
I think I may have an idea that will simulate what I am seeking. I can include the all the rules exactly the same in my css file except with different rule names and different graphics and then for the DIV that I want the randon background graphic to go into I can use a CLASS= attribute. Then I can have a javascript that randomly assigns a value to the CLASS attribute. Would this work?:confused:

Twey
01-25-2006, 08:16 PM
It would, but you could just as easily (or moreso) use the script I posted above :)

Spinethetic
01-25-2006, 08:21 PM
ok thank you!

Best Regards
~Spine :)

Spinethetic
02-16-2006, 06:04 PM
The above script is not working for me at all. However I have found a PHP alternative that is working fine: http://www.cb2web.com/tests/rotate.htm