1

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.

introducir la descripción de la imagen aquí

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

1 respuesta 1

1

Edito la respuesta para mostrar así la imagen, lo primero que se me ocurre rápido es que en tu base de datos agregues un campo nuevo que tenga el nombre de la imagen y su extencion y la imagen se la pongas en el HTML en lugar del CSS :

<?php 
    $sql="SELECT * from products order by codigo_producto";
    $result=mysqli_query($con,$sql);
    while($mostrar=mysqli_fetch_array($result)){
 ?>
   <div style="background-image: url(/Catalogo-simple/img/<?php echo $mostrar['imagen'] ?>);">
        <table border="1">
            <tr>
                <td>Codigo</td>
                <td>Precio</td>
            </tr>
            <tr>
                <td><?php echo $mostrar['codigo_producto'] ?></td>
                <td><?php echo $mostrar['precio_producto'] ?></td>  
        </table>
   </div>

<?php 
}
 ?>
4
  • 1
    El codigo que me pasaste esta buenisimo muchas gracias por ello @stre_leon, pero creo q no me supe expresar bien! Lo que quiero hacer es que sea como un salto de pagina y que cada pagina tenga un background diferente. Por ejemplo como si en un word o un PDF tuvieran 5 paginas y cada pagina tenga una imagen de fondo diferente.
    – Juanch0x
    Commented el 19 oct. 2019 a las 4:13
  • 1
    Ok pero en el código que pusiste antes... Y en el que está después de tu edición.. no estás mostrando ninguna imagen... Y el ejemplo que pones todas las imágenes del background son iguales.. pon el código donde muestras diferentes imágenes por favor...
    – streleon
    Commented el 19 oct. 2019 a las 4:44
  • 1
    Listo alli subi la imagen completa por producto. Y las imagenes las traigo desde un css a traves del DIV. No se que otras maneras hay :S te dejo el codigo css
    – Juanch0x
    Commented el 19 oct. 2019 a las 5:02
  • Es lo que necesitaba!! Muchas gracias por tu tiempo y la ayuda.
    – Juanch0x
    Commented el 21 oct. 2019 a las 15:21

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.