Я строю это в 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>
<?
}
?>
Контент загружается из базы данных SQL, я хочу, чтобы у каждого блока было свое фоновое изображение, теперь они все одинаковые.
Сначала я попытался поместить стиль в цикл while, но это не сработало.
Идея?
Если вы хотите, чтобы все контейнеры div имели разный фон, вы не можете добавить к ним один и тот же класс. Изображение в классе выбирается случайным образом, но после этого один и тот же фон изображения предоставляется всем элементам div с одинаковым классом.
Только с php у вас есть две возможности установить разный фон для всех изображений:
Первое решение:
написать цикл и установить CSS для IDS # small_block1- # small_blockx.
Второе решение:
установить встроенный CSS для всех элементов в теге style в цикле. Я покажу это решение ниже.
<?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++;
}
?>
Вы делаете это неправильно, вы всегда обновляете стиль. Вместо этого добавьте встроенный стиль.
<?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
}