I need to display different background URL on each row base on the item in MySQL. I use php mySQL fetch array to get the item name and background URL. So far, I was able to get the URL background and display in row by using CSS, but every time I choose different item all division row get’s overwritten by this new background. This result to have duplicate background.
I have attached of sample image where the background image of division row got overwritten and duplicate image.
[Duplicate Row Background][1] [1]: https://i.stack.imgur.com/qxLOI.png
Snippet of Php fetch array to echo the division and the CSS id of Background Image.
<style>
.blocks {
display:table-row;
}
.block {
display:table-cell;
height:100px;
}
#background-container {
display:table;
width:100%;
border-collapse:collapse;
background: url(<?php echo $bgurl; ?>) center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>while ($row = mysqli_fetch_array($query))
{
$pro_id = $row['pro_id'];
$sql1 = "SELECT * FROM products WHERE product_id = '$pro_id' ";
$query1 = mysqli_query($conn , $sql1);
while ($row1 = mysqli_fetch_array($query1))
{
$id = $row1['product_id'];
$name = $row1['product_title'];
$element = $row1['product_price'];
$faction = $row1['product_description'];
$picture = $row1['product_image'];
$class = $row1['product_keywords'];
$rarity = $row1['sales'];
$bgurl = $row1['bgurl'];
echo
'
<div class="container" id ="background-container">
<div class="row pt-2 pb-1" style="border-top: .5px solid grey; border-bottom: .5px solid grey;" >
<div class="col-4" >
<p class="squad1-title" >'.$bgurl.'</p>
</div>
<div class="col-7">
</div>
<div class="remove" >
<i class="fa fa-minus-square removeitem" style="padding center" data-proid="'.$id.'" title="Remove"> </i>
</div>
</div>
</div>
';
}
}