28111 sujets

CSS et mise en forme, CSS3

Yo, tout est dans le titre, je comprends pas pourquoi mon fond d'écran se redimensionne pas et ne se place pas correctement. Voilà le code :


body{
    margin: 0px;
    padding: 0px;
    background-image: url(https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto/gigs/123740332/original/99ec1c2a3bffcfbd3c852393b2cad54a08f670a7/create-anime-background-style.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    line-height: 1;
}


lien de l'image prcq le site bah il t'empêche de mettre de trop grosses images :
https://www.noelshack.com/2019-46-6-1573864833-capture.png

pour l'autre parti du code :


<!DOCTYPE html>
<html lang="fr">
    <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="css/styles.css">
            <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
            <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
            <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
            <title>Inconnu - Anime VOSTFR</title>
        </head>

        <body>
            <nav>
                <div class="nom">
                    <h4>Inconnu</h4>
                </div>
                <ul class="nav-links">
                    <li>
                        <a href="index.html">Accueil</a>
                    </li>
                    <li>
                        <a href="anime.html">Anime</a>
                    </li>
                    <li>
                        <a href="news.html">News</a>
                    </li>
                </ul>
                <div class="burger"><i class="fa fa-bars" aria-hidden="true"></i></div>

            </nav>

            <script src="nav.js"></script>

        </body>


</html>


et du JS

const navSlide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    burger.addEventListener('click', () => {
        
        nav.classList.toggle('nav-active');

        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = '';
            } else {
                link.style.animation = `navLinkFade 0.5 ease forwards ${index /7 + 0.3}s`
            }
        });
    });
}

navSlide();
Ok mdr, j'ss un peu débile. C'était le
bg-position: center
qui faisait n'importe quoi ^^
Meilleure solution