Grow your CSS skills. Land your dream job.

Homepage that changes headline copy and background image on Reload/Refresh. CODE ADDED, HELP!

  • # June 1, 2012 at 4:25 pm

    Is it possible with either Jquery or PHP to create a homepage with a changing background image and tagline/copy on reload.

    I’m using a full image background on a client website and I have specific headlines and copy that go with each background image. My plan was to used 4-6 images and taglines/copy.

    I don’t want to make the text part of the background image because that will do me no favors with the search engines.

    I know how to code it to change the background image on reload or the copy but not both at the same time. And I’ve had little luck finding a solution that satisfies both of these requirements.

    I’m really a designer and not a programmer, so go easy on me, But if anyone knows of a solution, I’d appreciate it. Thanks.

    # June 4, 2012 at 10:34 am

    Someone helped me out with this code but I still can’t seem to get the headings and paragraph to change with the background. Help.

    Before my HTML:

    < ?php

    // Generate a random number.
    $random = rand(0, 2);

    // Set up messages, and fetch a random one.
    $messages = array(
    array("heading" => "foo", "body" => "123"),
    array("heading" => "bar", "body" => "456"),
    array("heading" => "bad", "body" => "789")
    );
    $message = $messages[$random];

    ?>

    Then In my HTML


    < ?= $message ?>


    < ?= $message ?>


    Then in the CSS for the changing background images or colors

    body.background-0 { background: red; }
    body.background-1 { background: green; }
    body.background-2 { background: blue; }
    # June 5, 2012 at 5:10 pm

    Can you use straight JQ for this or does if have to be php ?

    You have various options like random images with jquery titles pulled from the ‘title’ or ‘alt’ attributes..

    I’m not really into php or much of a coder, but perhaps creating a array for each heading,image combo might work put into case switches. –> http://php.net/manual/en/control-structures.switch.php

    $randomizer = rand(0,2); // random statement
    switch($randomizer) { // returned value is loaded into the switch. The returned value loads the relevant data

    case ($randomizer == '1'):
    $title = 'Alpha dog';
    $bg = '../img/dog1.jpg'
    break;

    case ($randomizer == '2'):
    $title = 'Beta dog';
    $bg = '../img/dog2.jpg'
    break;

    default:
    $title = 'Default dog';
    $bg = '../img/dog-default.jpg'
    break;
    }

    echo '

    '.$title.'

    '

    Something like that. I’m sure someone with a little more php expertise can help you out here.

    # June 10, 2012 at 9:26 pm

    I’m second on that.

    just an idea.

    1. an array of images and title
    2. use jquery or direct php to get current image and title, save it in session
    3. the next time page loading just manipulate session to get current image etc.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".