PHP/CSS Random Background

Question

Trying to get a random background between two images.

The PHP (Before Doctype in index.php):

<?php
$bg = array('back1.jpg', 'back2.jpg' ); // array of filenames
$i = rand(0, count($bg)-1); // generate random number size of the array
$selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

CSS:

body {
  height: 100%;
  margin: 0;
  color: #474747;
  font: 13px/23px  'Exo 2', sans-serif;
  min-width: 1186px;
  background: url( ../img/<?php echo $selectedBg; ?>) no-repeat 50% 50%;
  background-size: cover;
  background-attachment: fixed;
}

The issue is that the background isn't set to either of the images!

EDIT:

Ive moved on to a completley PHP method although it errors:

Line : 5,   Error type : 4
Message : syntax error, unexpected '(', expecting variable (T_VARIABLE) or '$'

Code:

<?php
  $bg = array('back1.jpg', 'back2.jpg' ); // array of filenames
  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was   chosen
  $('body').css( {                        'background-image': 'url( img / ' +     echo $selectedBg + ')'            } );
?>

this $('body').css( {... is JS/jQuery and doesn't belong in your PHP and isn't PHP code, that's why you're getting that error. — Funk Forty Niner
– Funk Forty Niner, Commented Dec 24, 2015 at 1:00
I know, Ive moved it into my script side of things and it still wont set it — user5008872
– user5008872, Commented Dec 24, 2015 at 1:05
I don't know what you're telling me here. I mentioned that you have Javascript/jQuery code inside PHP and it doesn't work like that; hence, the syntax error. You need to seperate your JS from your PHP and make sure the jQuery library is loaded. E.G. api.jquery.com/html — Funk Forty Niner
– Funk Forty Niner, Commented Dec 24, 2015 at 1:07
Yes, Ive separated the code. Although it still doesn't want to work. — user5008872
– user5008872, Commented Dec 24, 2015 at 1:11
your question's code says otherwise. You need to edit your question with the exact code you're using and in what way. — Funk Forty Niner
– Funk Forty Niner, Commented Dec 24, 2015 at 1:14

Sunhat · Accepted Answer · 2015-12-24 00:22:08Z

1

What you're looking for would be

array_rand();

PHP Manual: http://php.net/manual/en/function.array-rand.php

for your PHP:

<?php
$bg = array('back1.jpg', 'back2.jpg' ); // array of filenames
$i = array_rand($bg); // generate random number size of the array
$selectedBg = $bg[$i]; // set variable equal to which random filename was chosen
?>

answered Dec 24, 2015 at 0:22

Sunhat

1371 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5008872 Over a year ago

Aha, I should clarify! The name oft he images is stored its just the background isn't set to the image.

JacobPariseau Over a year ago

The cleanest way to do this would be separate classes for each background and then just randomise the class with PHP instead of physically modifying the CSS with it.

user5008872 Over a year ago

@jacob Explain please

JacobPariseau · Accepted Answer · 2015-12-28 18:49:52Z

0

Your css file should have something like this in it

.one {
background: url(../img/back1.jpg);
}

.two {
background: url(../img/back2.jpg);
}

.three {
background: url(../img/back3.jpg);
}

And your HTML should have

<body class="<? echo $img ?>">

And then your PHP need only define $img as either one two or three

<?
$list = array('one', 'two', 'three' );
$i = array_rand($list);
$img = $list[$i];
?>

answered Dec 28, 2015 at 18:49

JacobPariseau

1951 silver badge13 bronze badges

1 Comment

4 Leave Cover Over a year ago

You would expose all your image files on the web isn't it? with PHP array_rand() you still keep some confidential. Please correct me if I'm wrong.

Collectives™ on Stack Overflow

PHP/CSS Random Background

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related