By Plipp on

Hi,

I really do not know how to realize a switching background image. I am running a website with a large image on the frontpage which currently shows one member of a sports team. I would love to have 6 images (one for every team member) that switch cronologically.

The image is defined as "background:url ............" in my "style.css" !

Can you help me ?
Thanks,
Plipp

⋅ Categories: Drupal 6.x

Comments

JohnnyMoney’s picture

JohnnyMoney commented

Ok, I haven't done this with background images, but I would think there must be some javascript out there that might do this. You will have to search around; don't think you'll get many replies here as your question is not really a Drupal related thing. I think.

*****************************
Drupal Video Tutorials (Spanish)
www.drupalcarmen.com

copoli’s picture

copoli commented

Sorry for my bad english. Watch my site for example : http://www.copetto.com/

You must modify your style.css with this command :

#header {
background: #0facea url(bandeau.php) no-repeat;
height: 180px;
border-bottom: 1px solid #669900; /* vert fonce */
position: relative;
}

The code for bandeau.php is :

// Generation d'un bandeau aleatoire.
header("Content-type: image/jpeg");
header("location:".'pictures/pictures_'.rand(1,6).'.jpg');

And you put your pictures (the names must be pictures_1.jpg, pictures_2.jpg, etc to 6 pictures...) in the pictures folder.

Sincerely,
Olivier.

Plipp’s picture

Plipp commented

... added to the website.

Thank you very much for this intelligent piece of code. It does its job perfectly. I have 8 background images which change by chance.

arturojared’s picture

arturojared commented

Can you send me please a copy of the files involved in this comment so I can be able to understand it in full

Thank you very much for sharing your wisdom.

arturojared@yahoo.com

cerion86’s picture

cerion86 commented

Thanks copoli for solution, nayway I've a problem... could someone check where I do wrong?

first, the code where is the image that I want to change every refresh is:

#rt-header .rt-container {background: #2B0211 url(../images/backgrounds/style3/header-bg.jpg) 100% -64px no-repeat;} (it's a rockettheme template)

so I changed in this way:
#rt-header .rt-container {background: #2B0211 url(../bandeau.php) 100% -64px no-repeat;}

so I created the file bandau.php in the root fot the site with this code:

<?php
// Generation d'un bandeau aleatoire.
header("Content-type: image/jpeg");
header("location:".'../pictures/picture_'.rand(1,3).'.jpg');
?>

And I placed the pictures folder, with picture_1.jpg (and others) in site root.

It doesn't work... could someone check please?

nevets’s picture

nevets commented

If you place bandeau.php in the sites root directory then you would use url(/bandeau.php). As it is, the script is expected to be relative to the current pages path.

cerion86’s picture

cerion86 commented

ohhh... thanks! :D
it works!

Technikal’s picture

Technikal commented

Thanks for this piece of code Olivier, but how does one restrict this functionality to the home page only ?

nevets’s picture

nevets commented

Another possible is to attach a class to the html element the background css applies to. If you very the class you can use the class to determine the image to show.

hollybeary’s picture

hollybeary commented

You could also try using JQuery to do this!

alexrayu’s picture

alexrayu commented

JQuery is to change it in the real time, the above example is to give out random images after refresh.

- Alexei Rayu.

Plipp’s picture

Plipp commented

of course this is not 100% drupal related. But i another way it is drupal related, because i really need it for my drupal installation. Anyway.

What "copoli" posted about his solution with the *.php is very nice. I will try this tomorrow and post the results. Thanks to everyone who posted. Plipp

Plipp’s picture

Plipp commented

.... as I mentioned, I used the .php sript to realize random images. Now I uploaded the resulting website. please feel free to click www.wefish.de

Edit: Please note that I changed the way random images are created in the meantime. I am using "Views Slideshow" now! Using .php scripts worked well, too, but "Views Slideshow" is easy to use and does the job!

Plipp