Back Home

Open Designs

Community. Driven.

General Talk: Random .css file

Bottom of Page

1 to 14 of 14

  1.  
    • CommentAuthorgillweb
    • CommentTimeSep 5th 2008
     
    I have a page that I want to have a random background show out of let's say 5 different images. I have come up with this idea but wanted to know if anyone knew of a easier way or if maybe this may cause some kind of problem I am not thinking of.

    <link rel="stylesheet" type="text/css" href="css/default.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="css/bg<?=rand(1,5)?>.css" media="screen"/>

    This PHP code just writes a random number between 1 and 5 so the page would look for bg1.css, bg2.css, etc. and within each of the css files has a different background image selected. Again, any problems or better ideas to do this?

    Thanks
  2.  

    <style>
    body {
    background-color: <script type="text/javascript">
    window.onload = BG_change;
    function BG_change()
    {
    document.write = 'rgb(' +
    Math.floor(Math.random() * 256) + ',' +
    Math.floor(Math.random() * 256) + ',' +
    Math.floor(Math.random() * 256) + ')' ;
    }
    </script>
    }
    </style>


    IDK if this will work just something i kinda spit out so...
    • CommentAuthordannisbet
    • CommentTimeSep 6th 2008
     
    That might work, but what if someone visits with js disabled?
    •  
      CommentAuthoraaroncampbell
    • CommentTimeSep 6th 2008 edited by aaroncampbell on the 06th September 2008 at 10:35:56 EDT
     
    Then they get the default color.

    You could also use php to generate a css file randomly and do something like this:

    <link rel="stylesheet" type="text/css" href="css.php?<?php echo time(); ?>" media="screen"/>
    • CommentAuthorsummitr
    • CommentTimeSep 6th 2008
     
    I believe gillweb wants a random background image, not just a different color. So I think the simplest way is doing what gillweb is doing. The other option might be doing the exact same thing and making the stylesheet a php file. So if you name the background images bg1, bg2, etc., the default.php stylesheet would have

    body { background-image: url(bg<?=rand(1,5);?>; }

    Then in your stylesheet link would look like

    <link rel="stylesheet" type="text/css" href="css/default.php" media="screen"/>

    Note: I didn't actually test this to see if it would work, but it should.
    • CommentAuthorgillweb
    • CommentTimeSep 6th 2008
     
    correct summitr I am doing a background image not just a color. And it seems like what I have as a random .css file loading like this should work. It does work, but i just want to make sure no one could think of a reason why it wouldn't?? Like would there be a reason why a .css file would not load?
    •  
      CommentAuthorbakercad
    • CommentTimeSep 6th 2008
     
    gillweb, the way you're doing it should work just fine. summitr's idea should work too. If summitr's idea dos NOT work AND you have an Apache server, you can still use summitr's idea (leave the php code) & name the file as default.css. Then in an .htaccess file use this code:

    <Files default.css>
    ForceType application/x-httpd-php
    </Files>
    It forces default.css to be read as a php file & works quite nicely
    • CommentAuthorgillweb
    • CommentTimeSep 6th 2008
     
    ok thanks everyone ... bakie
    •  
      CommentAuthorJJenZz
    • CommentTimeSep 7th 2008
     
    And if you dont like having to reference a php file within your link tag, you can always use htaccess to rewrite it! That's what I have done in the past...

    <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
    and then htaccess:

    RewriteEngine On
    RewriteBase /
    RewriteRule ^css/style.css$ css/default.php
    I haven't tested this so it may need tweaking in some areas
    • CommentAuthorwebmatter
    • CommentTimeSep 7th 2008 edited by webmatter on the 07th September 2008 at 08:32:04 EDT
     
    You could also create a php file rotate.php

    <?php
    $random_image = rand(1,5);
    ?>
    <img src="<?php echo $random_image; ?>.jpg" alt="Random image... " />

    Then in your css-file define the background:

    body { background: url(path to rotate.php) no-repeat center top; }
    /* or whereever you want to place the background image */

    I am using this way myself for rotating header images and it works well.
  11.  
    That wouldn't work would it as you don't require the img tag outputted within the background property?
  12.  
    Posted By: webmatterYou could also create a php file rotate.php

    <?php
    $random_image = rand(1,5);
    ?>
    <img src="<?php echo $random_image; ?>.jpg" alt="Random image... " />

    Then in your css-file define the background:

    body { background: url(path to rotate.php) no-repeat center top; }
    /* or whereever you want to place the background image */

    I am using this way myself for rotating header images and it works well.

    I also used something similar to this in a WP Theme that i designed for a church.
    • CommentAuthorwebmatter
    • CommentTimeSep 7th 2008 edited by webmatter on the 07th September 2008 at 14:27:03 EDT
     
    Posted By: ChristopherThat wouldn't work would it as you don't require the img tag outputted within the background property?


    Looks strange I know ... but it works ... try it out :).
    • CommentAuthornocabt
    • CommentTimeOct 17th 2008 edited by nocabt on the 17th October 2008 at 17:53:58 EDT
     
    One variation of this I used was creating Body IDs like



    #random1 {properties}
    #random2 {properties}
    #random3 {properties}
    #random4 {properties}
    #random5 {properties}


    and then using
    <body id="random<?=rand(1,5)?>">

    in the html. This gives you nice control over more than just the image, for example if the bg color should be different for each image, or if you want the image positioned differnetly, or whatever. I just started with gillwebs code.

1 to 14 of 14

  1.