Thread: Random Images using CSS files
Results 1 to 4 of 4
Related
-
Random Images Forum: PHP Forum
Replies: 1 -
Random Images Advanced Forum: HTML Forum
Replies: 4 -
multiple random images Forum: PHP Forum
Replies: 21 -
random images php script Forum: PHP Forum
Replies: 3 -
Random Pic Javascript Forum: Javascript Forum
Replies: 1
-
09-25-2007, 12:50 PM #1
Random Images using CSS files
I'm wanting to use a random image for the header on my webpage, but i've used a CSS file with the following for the Header:
#header{
background-image: url(images/header.jpg);
height: 400px;
width: 800px;
left: 0px;
top: 0px;
then just display it in the main page code.
Any Help??
cheers
Mark
-
11-09-2007, 08:57 AM #2
Re: Random Images using CSS files
generate css file using php
-
11-10-2007, 09:25 AM #3
Re: Random Images using CSS files
yeah use php to generate css
-
11-23-2007, 03:27 PM #4
Re: Random Images using CSS files
A few things to be cautioned about if you're going to use php in the file.
First, if its going to be an external .css file (instead of just <style> tags in the main file), you'll need to plop this into your .htaccess file (assuming you're on linux)
PHP Code:AddType application/x-httpd-php .css
Second, Some browsers cache .css files, so it would just download the file once and use it for every page. This would cause the image to not be random.
You can solve this a few simple ways.
First, you could add a random parameter to your css link
HTML Code:<link href="p/style.css?rand=<?=rand(1,100000)?>" rel=stylesheet type=text/css>
The second option is just putting your random header code inside of <style> tags inside of your main file.
Both of these options involve using php in your main page. Unless you'd like to rename your file <whatever>.php, you can put the embed php line in your .htaccess file:
PHP Code:AddType application/x-httpd-php .html
And if you're unfamiliar with php, here is a sample of how you could randomize your header image.
First, name the headers header1.jpg, header2.jpg, header3.jpg, etc
Next, use this in your css:
PHP Code:<?
//Change the "4" to the number of headers you have uploaded in the images folder as header#.jpg
$headers = 4;
#header{
background-image: url(images/header<?=rand(1,$headers)?>.jpg);
height: 400px;
width: 800px;
left: 0px;
top: 0px;
}
Bruce
Cloudjiffy- PaaS for Developers
10-05-2020, 12:30 AM in Web Hosting Forum