Hola soy nuevo en esto y queria saber si alguien me puede orientar un poco. El tema es el siguiente... Estoy haciendo un catalogo web en el cual debo mostrar verias imagenes en un mismo HTML pero el codigo es muy largo ya que serian mas o menos unos 50 productos y solo he conseguido hacerlo de la siguiente manera.
<div id="fondo1">
<?php
$sql="SELECT * FROM products where codigo_producto=001";
$res=mysqli_query($con,$sql);
while($mostrar=mysqli_fetch_array($res)){
?>
<?php echo $mostrar['codigo_producto']?>
<?php echo $mostrar['precio_producto']?>
<?php
}
?>
</div>
<div style="page-break-after: always;"></div>
<div id="fondo2">
<table>
<tr>
<th>Codigo</th>
<th>Precio</th>
</tr>
<?php
$sql="SELECT * FROM products where codigo_producto=002";
$res=mysqli_query($con,$sql);
while($mostrar=mysqli_fetch_array($res)){
?>
<tr>
<td><?php echo $mostrar['codigo_producto']?></td>
<td><?php echo $mostrar['precio_producto']?></td>
</tr>
<?php
}
?>
</table>
</div>
Y ese codigo lo tengo que repetir por cada producto (no se como hacerlo de otra manera). Hay alguna manera de mostrar las 50 imagenes y no repitir el mismo codigo por aca una y asi no quede tan largo?
Quisiera que se viera asi. Pero sin tener que colocar 50 veces el codigo con el div fondo1,fondo2,3... etc.
Codigo Css.
body {}
#fondo1{background-image: url("/Catalogo-simple/img/1.png");
height: 210mm;
width: 297mm;
display: block;
margin: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#fondo2{
background-image: url(/Catalogo-simple/img/2.png);
height: 210mm;
width: 297mm;
display: block;
margin: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}