each query a different background-image - php

Question

I build this in php:
<?php
$bg = array('block2.png', 'block3.png', 'block4.png', 'block5.png', 'block7.png' );
$i = rand(0, count($bg)-1);
$selectedBg = "$bg[$i]";
?>
<style type="text/css">
<!--
.block_small{
background-image: url(/tableaux/customer/images/<?php echo $selectedBg; ?>);
}
-->
</style>
<?php
$db = new DB();
$db->query("SELECT * FROM vestigingen ");
while($item = $db->next_record()){
?>
<div class="block_small">
<img src="<?php echo $item['afbeelding']; ?>" />
<h1><?php echo $item['plaats']; ?></h1>
<div class="content_blocks">
<p><?php echo $item['adres']; ?></p>
<p><?php echo $item['postcode']; ?></p>
<p><?php echo $item['telefoon']; ?></p>
<p><?php echo $item['mail']; ?></p>
</div>
<div class="arrow"><?php echo $item['link']; ?></div>
</div>
<?
}
?>
Content loads from a SQL database, I want every block to have a different background-image, now they are all the same.
I first tried to put the style in the while loop but that didn't work.
Idea's ?

Answer 1

If you want all the div containers to have a different background you cannot append the same class to all of them. The image in the class is chosen randomly, but afterwards the same image-background is given to all the div elements with the same class.
With only php you got two possibilities to set a different background for all of the images:
first solution:
write a loop and set the css for ids #small_block1-#small_blockx.
second solution:
set inline css for all the elements within the style tag in a loop. I will show this solution below.
<?php
$bg = array('block2.png', 'block3.png', 'block4.png', 'block5.png', 'block7.png' );
$db = new DB();
$db->query("SELECT * FROM vestigingen ");
$counter = 0;
while($item = $db->next_record()){
?>
<div class="block_small" style="background-image: url(/tableaux/customer/images/<?php echo $bg[$counter]; ?>);" >
<img src="<?php echo $item['afbeelding']; ?>" />
<h1><?php echo $item['plaats']; ?></h1>
<div class="content_blocks">
<p><?php echo $item['adres']; ?></p>
<p><?php echo $item['postcode']; ?></p>
<p><?php echo $item['telefoon']; ?></p>
<p><?php echo $item['mail']; ?></p>
</div>
<div class="arrow"><?php echo $item['link']; ?></div>
</div>
<?
$counter++;
}
?>

Answer 2

You are do it in wrong way, you are always update the style. Instead of this, add an inline style.
<?php
$bg = array('block2.png', 'block3.png', 'block4.png', 'block5.png', 'block7.png');
$db = new DB();
$db->query("SELECT * FROM vestigingen ");
while ($item = $db->next_record()) {
$selectedBg = $bg[array_rand($bg)];
?>
<div class="block_small" style="background-image: url('/tableaux/customer/images/<?php echo $selectedBg; ?>)';">
<img src="<?php echo $item['afbeelding']; ?>" />
<h1><?php echo $item['plaats']; ?></h1>
<div class="content_blocks">
<p><?php echo $item['adres']; ?></p>
<p><?php echo $item['postcode']; ?></p>
<p><?php echo $item['telefoon']; ?></p>
<p><?php echo $item['mail']; ?></p>
</div>
<div class="arrow"><?php echo $item['link']; ?></div>
</div>
<?php
}