39 users online (0 members and 39 guests)  


  Results 1 to 4 of 4

Related

  1. Random Images    Forum: PHP Forum
    Replies: 1
  2. Random Images Advanced    Forum: HTML Forum
    Replies: 4
  3. multiple random images    Forum: PHP Forum
    Replies: 21
  4. random images php script    Forum: PHP Forum
    Replies: 3
  5. Random Pic Javascript    Forum: Javascript Forum
    Replies: 1
  1. #1
    mpooleman's Avatar
    New User

    Status
    Offline
    Join Date
    Sep 2007
    Posts
    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

  2. #2
    JackyBrown's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Posts
    3

    Re: Random Images using CSS files

    generate css file using php

  3. #3
    johnkayjay1's Avatar
    Disabled

    Status
    Offline
    Join Date
    Nov 2007
    Posts
    3

    Re: Random Images using CSS files

    yeah use php to generate css

  4. #4
    Bruce_KD's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Location
    Delaware, USA
    Posts
    2

    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 
    This allows you to use the .css extension, but the server parses the php code inside.

    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>
    That forces the browser into thinking the css file is new every single time.

    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 
    (If you're using .htm extension, change the .html to .htm)

    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-imageurl(images/header<?=rand(1,$headers)?>.jpg);
        height: 400px;
        width: 800px;
        left: 0px;
        top: 0px;
    }

    Bruce



Tags for this Thread