Changing background color randomly each time a page is refreshed?

  • I’d like my background color to randomly change everytime someone enters either my home page, other pages or posts. How could I make this possible?

Viewing 9 replies - 1 through 9 (of 9 total)

  • Something like:

    FUNCTIONS.PHP

    function random_bg() {
	$bgs = array ('ddd, 'ccc', '999', 'eee', 'aaa');
	$n = rand( 0, 4);
	echo $bgs($n);
}

    HEADER.PHP
    <body <?php body_class(); ?> style="background-color:#<?php random_bg();?>">

    should work.

    Thread Starter kasper-1

    (@kasper-1)

    Thanks for your reply, I couldn’t relly make it work.

    No way to do this entirely in my style.css file? That’s where all the color settings are.

    /* =structure */
body{background-color:#fff;color:#444;font:1.4em/1.6 "Hoefler Text", "Georgia", Georgia, serif, sans-serif;margin:0;padding:0}
#wrapper{padding:0;margin:0 auto;width:800px;position:relative;display:block}

    Is there any way to put some magig code in there that’ll do the trick?

    Thanks ??

    css files don’t execute php code; the way @esmi recommended should work fine.

    i bet you’ve got some error messages; and it would help to report these here.
    typos do happen ??

    function random_bg() {
	$bgs = array ('ddd', 'ccc', '999', 'eee', 'aaa');
	$n = rand( 0, 4);
	echo $bgs[$n];
}

    the number codes included obviously give you beautiful shades of grey ??

    for a really random color try:

    function random_bg() {
	echo dechex(rand( 1, 4095));
}

    Thread Starter kasper-1

    (@kasper-1)

    Worked a dream, thanks. The background color in post content and on page titles remains white (standard theme color), how do i make these colors match the color of the randomly selected background? And they would have to show the same color.

    instead of adding the style with the color directly into the body tag, you could make an embedded style in the header.php:

    <style type="text/css" media="screen">
body, ID-or-CLASS-of-content, ID-or-CLASS-of-title { background-color: <?php random_bg(); ?>; }
</style>

    this ID-or-CLASS-of-content, ID-or-CLASS-of-title depends on the css class or id of the post content and the page title.

    the number codes included obviously give you beautiful shades of grey ??

    I plead severe imagination drainage at the time. ??

    l o l ??

    Thread Starter kasper-1

    (@kasper-1)

    This is what the code looks like for post content in my css:
    .single .post .entry-content, .single .attachment .entry-content {background:#fff;color:#888;font-size:1.2em;float:left;padding:0 10px 0 0;margin:0;width:590px;position:relative;z-index:10;min-height:200px;}

    And this is probably a silly question, but what exactly is the class or id here? In other words, what shall i replace ID-or-CLASS-of-CONTENT with?

    EDIT:

    Think i figured it out.. Does this look right?

    <style type="text/css" media="screen">
body, .single .post .entry-content, .single .attachment .entry-content, .page h2.entry-title { background-color: <?php random_bg(); ?>; }
</style>

    Where in my header.php would be the best place to put it? I tried putting it under </head> but that makes my site go completely blank.

    And if i’d like restrict it to a selection of colors, what would be a good way to do that?

    Thanks for coping with me. I must be the only one not watching the game ??

    Where in my header.php would be the best place to put it? I tried putting it under </head> but that makes my site go completely blank.

    if forgot to state that this should go into the <head> section of header.php, i.e. somewhere before </head>.

    if you want to restrict the choice of colors, it is best to go with the array idea, and put in as many color codes as you like:

    function random_bg() {
	$bgs = array ('DDA0DD', 'ccc', '99ff22', 'eee', 'aaa');
	$n = rand( 0, count($bgs)-1); // automatic adjust to any number of color codes
	echo $bgs[$n];
}

    you can use and mix 6digit or 3digit hexadecimal color codes; see for instance:
    https://en.wikipedia.org/wiki/Web_colors

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Changing background color randomly each time a page is refreshed?’ is closed to new replies.