What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

CSS display bug

jeremygoldyn

New member
Hello everyone,

I am working on a personal travel website displaying all cool places to visit.
Language : HTML, PHP

I have a display bug which is coming from CSS I think but I don't know how to fix it.

1. There is a gap between the image and the background.
2. The background which should display a transparent filter does not apply. How to make it pass above the image?

Any idea to solve this? | * ()
Thank you ! 🙏

Current visual result: see here

html code:

HTML:
**** ENDROITS À DÉCOUVRIR <br><br />

<?php
try
{
    // On se connecte à MySQL
    $bdd = new PDO('mysql:host=localhost;dbname=visitearth;charset=utf8', 'root', 'root');
}
catch(Exception $e)
{
    // En cas d'erreur, on affiche un message et on arrête tout
        die('Erreur : '.$e->getMessage());
}

$reponse = $bdd->query('SELECT l.comte_nom, l.lieu_nom, l.pays_nom, p.flag_nom, l.lieu_url
FROM lieux l LEFT JOIN pays p ON l.pays_nom = p.pays_nom LIMIT 16');

?>

<?php while ($donnees = $reponse->fetch()) { ?>

<div class="vignette">
    <div class="lieu"><?php echo $donnees['lieu_nom']; ?></p></div>
    <div class="pays"><?php echo $donnees['pays_nom']; ?>, <?php echo $donnees['comte_nom']; ?></div>   
    <img src="<?php echo $donnees['flag_nom']; ?>" alt="drapeau" class="flag">
    <img src="<?php echo $donnees['lieu_url']; ?>" alt="Lieu"/>
</div>
<?php } ?>

</body>
</html>


CSS code:

CSS:
/* Vignette */

.vignette
{
    background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, #000000 100%);
    font-family: montserrat;
    display: inline-block;
    width: 270px;
    height: 302px;
    border-radius: 2px;
}

.flag
{
    max-width: 20px;
    max-height: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 100px;

}

.lieu
{
    font-size: 20px;
    color: white;
    text-transform: uppercase;
    text-align: center;
    position: relative;
    top: 200px;
}

.pays
{
    font-size: 15px;
    color: white;
    position: relative;
    top: 200px;
    text-align: center;
}

.vignette img
{
    object-fit: cover;
    width: 270px;
    height: 302px;
    object-position: 100% 0;
}
 
Back
Top