<style>
    body {
		background-size: cover; 
		background-position: center; 
		background-attachment: fixed;
        background-image: url(<?php echo $url; ?>/img/img_wd/bg_dia.png);
	}

    img {
        width: 65%;
    }
</style>

<div class="col-md-12">
    <?php 
        if(!isset($pagina[1])) {
            $pagina[1] = "";
        }
        if ($pagina[1] != "" && $pagina[1] != "actualizar") {

            $queryImage = mysqli_query($connect,"update Asistentes set imagen='".$pagina[1].".png' where id=".$_SESSION['id_user'].";");
            $_SESSION['imagen'] = $url.'/img/avatar/'.$pagina[1].".png";
            if($pagina[2]== 'actualizar') {
                echo '
			<script>
				window.location = "/cuenta"
			</script>
            ';
            }
            echo '
			<script>
				window.location = "/registro"
			</script>
            ';
        }
    ?>
	<div class="container" >
        <h2 style="color: white;">De clic sobre el avatar que desea seleccionar.</h2>
    <div class="row">
        <?php 
            $queryImage = mysqli_query($connect,"SELECT * FROM Avatar ORDER BY RAND();");
            while($image = mysqli_fetch_array($queryImage)){
                ?>
                <div class="col-3 col-sm-3 col-md-3 col-lg-2 col-xl-2">
                    <a href="/avatar/<?php echo explode('.', $image['imagen'])[0].'/'.$pagina[1];?>">
                <img class="avatar" src="<?php echo $url.'/img/avatar/'.$image['imagen']; ?>" alt=""></a>
                </div>
                <?php
            }
        ?>

		</div>

	</div>
	
</div>

<script>
$( document ).ready(function() {
    $("#bt_agenda").addClass("btn_item_menu_active"); 
});
</script>