Assigner plusieurs background-images à une class

motobecane31
Javascript

Bonjour, je suis en train de créer un petit navigateur pour un site. Dans celui-ci je voudrais que chaque bloc ai un background-image propre. Sachant que chaque bloc à la même class, je pensais passer par Javascript mais mon code ne fonctionne pas.

Pourriez-vous m'aider ?

CSS

.selecta {

width: 200px;
height: 200px;
display: flex;
justify-content: space-around;
font-family: 'Arial';
font-weight: bold;
border: 1px solid black;
margin-top: 5px;

}

HTML

<div id="liste">
            <a href="#" class="selecta">
                <p class="titre">Bain de Forêt</p>
            </a>
            <a href="#" class="selecta">
                <p class="titre">Carto Action</p>
            </a>
            <a href="#" class="selecta">
                <p class="titre">Bain de Forêt</p>
            </a>
            <a href="#" class="selecta">
                <p class="titre">Bain de Forêt</p>
            </a>
            <a href="#" class="selecta">
                <p class="titre">Bain de Forêt</p>
            </a>
            <a href="#" class="selecta">
                <p class="titre">Bain de Forêt</p>
            </a>
            <a href="#" class="selecta">
                <p class="titre">Bain de Forêt</p>
            </a> 
        </div>

JS

function backgroundList() {

    var elements = document.querySelectorAll("selecta");
        for (var i = 0; i < elements.length; i++) {
            var element = elements[i];
            element.style.backgroundImage = 'url(BC' + i + '.jpg)';
        }
}

1 réponse

Lartak

Bonsoir.

je pensais passer par Javascript mais mon code ne fonctionne pas.

À quel moment fais-tu appel à la fonction ?
Tu as peut-être défini la fonction, mais je ne vois pas à quel moment tu y fais appel.
Au passage, vérifies si tu as des erreurs dans la console de l'inspecteur de ton navigateur.