How do I make background Image on each division row from URL

Question

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> '; } }

Answer 1

ID's are used for one and only element in the page, you will need to switch to classes if you want to style multiple elements.

That being said, you can overwrite a css property by including it in the style property of an element

<?php
    echo `<div class="container" style="background-image: url(` . $bgurl . `)">`
    ...
?>

Answer 2

In CSS #background-container ---> Single tag in HTML

.background-container ---> Multiple tag in HTML

The problem is you overwrite the last one

Change

#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;
}

<div class="container" id ="background-container">

By

.background-container { 
  display:table;
  width:100%;
  border-collapse:collapse;
 
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div class="container" class="background-container" style="background: url(<?php echo  $bgurl; ?>) center;">

Or something similar.