www.webdeveloper.com
Results 1 to 6 of 6

Thread: Loading a different image each time?

  1. #1
    Join Date
    Sep 2013
    Posts
    1

    Question Loading a different image each time?

    Hi,
    I'm a newbie, i'm just wondering if there is anyway to load a different image randomly each time you load the page? It's for a background image on the site and is controlled by the css. I have 5 different images and this is the code

    Code:
    	#slider:before {
    		background-image: url(../images/backgrounds/background_01.jpg);
    	}
    	
    	#page-title:before {
    		background-image: url(../images/backgrounds/background_01.jpg);
    	}
    	
    	footer:before {
    		background-image: url(../images/backgrounds/background_01.jpg);
    	}
    If anyone could help me asap that would be great!

    Thanks,
    Addison :-)

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    You can do it with CSS. You'll need some software - either JavaScript or a server-based script. Try searching on "javascript random image" and you should find something you can use.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Apr 2012
    Posts
    38
    You could create several classes (or whatsoever) with the same name but different prefix (number) and use a javascript to random a number from the range your use.

    For example: create classes bg1, bg2, bg3, bg4 and have a javascript put a random number in a variabele between 1 and 4.
    Then name the class of the div bg + javascript variable.

    I don't think you're able to do this with just CSS. You will need some sort of scripting language.

  4. #4
    Join Date
    Sep 2013
    Posts
    17
    This is how simple it really can be:

    //code:
    <?php
    $panel = rand(1,12);
    echo
    "<div id=\"mainindex\" style=\"height: 264px; width:430px; background-image:url('login_bg".$panel.".jpg'); text-align:center;\">";
    ?>
    //End of code.

    I took that directly from a page where I randomly have a different one of 12 images
    as the background to the div "mainindex" every time a user opens the page.
    The images are: login_bg1.jpg,login_bg2.jpg,login_bg3.jpg, etc... to... login_bg12.jpg
    The images are in the same directory as my page file so I don't have to do a full path.

    Php is a beautiful thing.

  5. #5
    Join Date
    Mar 2012
    Posts
    1,197
    I love php as well, but there is a set-up overhead that should be mentioned. You can't test php code in a browser, you have to set up a local host. I use wamp server, it's dead easy to set up and use.

  6. #6
    Join Date
    Sep 2013
    Posts
    221
    Ok - the issue depends on multiple things

    only might happen with an empty cache
    depends on the loading speed of font-awesome & bootsrap.

    So here it is:

    <div class="page-header clearfix">
    <a href="/" class="logo pull-left"">
    <img src="images/logo.png" height="62" width="232" alt="">
    </a>
    Hope that helps you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles