Joomla!
http://forum.joomla.org/

Background image
http://forum.joomla.org/viewtopic.php?f=42&t=20568		 Page 1 of 1
Author:  aris [ Thu Nov 24, 2005 4:04 am ]
Post subject:  Background image
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-
Author:  philmoz [ Thu Nov 24, 2005 6:42 am ]
Post subject:  Re: Background image
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:
Author:  aris [ Thu Nov 24, 2005 7:13 am ]
Post subject:  Re: 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-
Author:  focalguy [ Thu Nov 24, 2005 5:04 pm ]
Post subject:  Re: Background image
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.
Author:  philmoz [ Fri Nov 25, 2005 12:04 am ]
Post subject:  Re: Background image
aris wrote:
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 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:
Code:
<body <?php echo RandomBackground();?> >

and then put the following at the very very end of your index.php
Code:
<?php
function RandomBackground(){
$bgFile_array = Array();
$fullDir= $GLOBALS['mosConfig_absolute_path']."/templates/".$GLOBALS['cur_template']."/random/";
$handle = opendir($fullDir); // open 'random' directory in template directory (should have the images)
while (false !== ($file = readdir($handle))) {
   if ($file != "." && $file != "..") {
   $val=explode(".",$file); // separates filename from extension
   if ($val[1]=='jpg' or $val[1]=='png'or $val[1]=='gif'){ // tests extension for compliance to restrictions
   $bgFile_array[] = $val[0].".".$val[1];} //rejoins name and extension
   }
}
closedir($handle);
$random_top = count($bgFile_array); // counts how many entries in the array
$selector = rand(1,$random_top)-1; // chooses what position in array to get the image
$style_output = "style=\"background:url('".$GLOBALS['mosConfig_live_site']."/templates/".$GLOBALS['cur_template']."/random/".$bgFile_array[$selector]."') top left repeat;\""; // generates the style code.
return $style_output;
}
?>


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.
Author:  absalom [ Fri Nov 25, 2005 3:49 am ]
Post subject:  Re: Background image
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) 8) 8)

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. ;D
Author:  aris [ Fri Nov 25, 2005 4:33 am ]
Post subject:  Re: Background image
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-
Author:  aris [ Fri Nov 25, 2005 4:36 am ]
Post subject:  Re: Background image
focalguy wrote:
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.


thank you .. focalguy. will be try

best rgd
aris-
Author:  philmoz [ Fri Nov 25, 2005 4:55 am ]
Post subject:  Re: Background image
@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***
absalom wrote:
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) 8) 8)

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. ;D

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
Code:
#page1{
background: url(../images/indent3.png) top left repeat;
}
#page2{
background: url(../images/01.gif) top right repeat-y;
}
... etc

and in the index.php file
Code:
<?php $random_top = 2; // you would have to set this using the number of css entries as above.
$random = rand(1, $random_top); //pick a number any number ?>
<body id="page<?php echo $random;?>">

(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 :D :P
Author:  absalom [ Fri Nov 25, 2005 5:44 am ]
Post subject:  Re: Background image
Your idea of my random code is still too long.

The code for $random is simply:
Code:
$random = rand(1,9);

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.  8)

I'm thinking of expanding this out to 50 with my new layout.
Author:  philmoz [ Fri Nov 25, 2005 6:16 am ]
Post subject:  Re: Background image
absalom wrote:
Your idea of my random code is still too long.

The code for $random is simply:
Code:
$random = rand(1,9);

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 ;)
Quote:
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.  8)

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

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
Code:
<style>body{background-image:url("../image_directory/image");}</style>


Or is that still, IYHO, overdoing it - so to speak?
Author:  absalom [ Fri Nov 25, 2005 9:12 am ]
Post subject:  Re: Background image
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  8) ).

You could even point to another server if you wanted to to source the images (say, if you have a dedicated image library server?) ;D
Author:  panter011 [ Wed Dec 07, 2005 12:20 am ]
Post subject:  Re: Background image
Hey guys, I am searching for hours how to call a module from my css file.

I am trying this without success:

Code:
#headerbox {
   position:absolute;
   left:0px;
   top:58px;
   width:640px;
   height:94px;
   z-index:3;
        background-image: <?php mosLoadModules ( 'advert1' ); ?>;
   background-repeat: no-repeat;
}


But the background image doesnt show.
any help?
Author:  absalom [ Wed Dec 07, 2005 1:20 am ]
Post subject:  Re: Background image
Never call PHP from a CSS file. It simply won't work.
Author:  kulotski [ Wed Jan 11, 2006 1:12 pm ]
Post subject:  Re: Background image
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
Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/