Joomla! Discussion Forums

dear all,
I just release a new version of my client pks-batam.or.id an Indonesian language website from $ambo to Joomla 1.0.4.
I put a background image controled on template_css.css here:

body {
color: #000000;
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
font-family: arial,verdana,sans-serif;
font-size: 11px;
background-image: url(../images/bck2.gif);
}
My question, can I change randomly a background image with another images that I have? -> free background pattern on http://http://squidfingers.com/patterns/.

thnks and regards

aris-

Not directly through the stylesheet, but yes, it is possible, however, you will have to write a script that will dynamically alter tag of the template.
a possible methodology:

place the extra images in a dedicated directory in the template directory
write the script to do the following

• look in the dedicated directory
  
• get all image filenames, and put in an array
  
• get the number of entries in the array
  
• create a random generator, using the number of entries in the array as top limit.
  
• use the returned random number to select an entry from the array as a variable
  

edit the tag of template index.php to include
style="background-image:

thak you phil,
basicly understand. but I am not a coder  . my based on design. so...it's difficult for me to realize into the code (script).
ehmm..could you create please? I think usefull for other person.

rgds
aris-

You could look at this post where the header image changes based on days of the week as well. Maybe just simplify the code he is using.

You claim not to be a coder.
I will claim to be not much of a coder
anyway.... the following tested on Joomla! 1.0.3, running on baobab server...

Create a directory in your template directory, at the same level as index.php, called    random
Put some images into the new directory (might like to update your xml file as well)
Make your body tag look something like this:
and then put the following at the very very end of your index.php

This code looks in the directory named  'random', and selects only jpg,gif or png files.
You could use this in body, div, or table to vary the background randomly.
I would still recommend having the background-image defined in the default style sheet as well... just in case

Hope it helps you out.

Or you could just include a randomised id that cascades through the body..

i.e




#page1 has 1 image, #page2 has another and so on.. Just remember to keep everything apart from the image calls themselves in the body CSS definition.

I use this on my own site.. (nice rotating images via CSS is way cool)

All in all, it's only 2 extra lines of code in the template itself. The CSS will have varying mileage, as I use over a dozen rotating images on my site, which means it can be done through the stylesheet.

Amazing! Great!
Thank you Phil,. it's work fine. And now, was applied in my website client - see http://www.pks-batam.or.id

best rgd
aris-

thank you .. focalguy. will be try

best rgd
aris-

@aris
Glad it was of use.
***Started typing, and testing Absolam's method before Aris's reply, so now posting in general to show the implementation of this method for any non-coders interested***

Horses for courses-- which is not a criticism, just a fact.
This is yet another solution. However, it means that filenames are hardcoded in the css (ok for static items).
Depending on your needs, Absalom's solution may well be the better choice.
Following his method, you would have in your css, something like
and in the index.php file

(I have left the $random_top to seperate the max level of the random generator.)
It means editing css each time you change/add/remove an image, and considering the amount of css code, not difficult at all.
[edit]-- also means you have tight control over the images in rotation, and can stop one or more by editing css. [/edit]
The method I put up, allows you to just drop images into the dedicated directory, and they will be selected.
[edit]-- to remove image from rotation, you need to delete the image from the directory [/edit]

As I said, horses for courses.
Choose your steed

Your idea of my random code is still too long.

The code for $random is simply:

which I usually dump in the first PHP call, being the J! or die statement. You don't need two lines to determine the maximum random images. All you need to do is determine how many random images you want on a page.

The reason my CSS for my own site is so long is that I'm rotating nearly 20 images on 2 layouts using this effect. 

I'm thinking of expanding this out to 50 with my new layout.

That pretty much dawned on me about half hour after posting, that what I put up was -- messy  -- but then, I'm unashamedly a hack, not a coder

Out of curiosity, would you be tempted to use code similar to that which I posted as an included function file, and use it to generate an inline style to extend the tag?
ie, to output


Or is that still, IYHO, overdoing it - so to speak?

It's overkill.

You can point to whatever file and directory you want using the CSS background image call, and that way, it doesn't require inline CSS (which I find to be a waste of resources - you have a CSS file, use it  ).

You could even point to another server if you wanted to to source the images (say, if you have a dedicated image library server?)

Hey guys, I am searching for hours how to call a module from my css file.

I am trying this without success:



But the background image doesnt show.
any help?

Never call PHP from a CSS file. It simply won't work.

Just wanna say thank you guys for this thread. Long have I waited for such a solution. You don't know how much you have helped me (and I'm pretty sure most newbies as well). Thanks so much !

In case you've encountered Maarten Robben's random background module, you may want to shed light.    His module can be downloaded at http://mamboforge.net/projects/randombg