Faire apparaître une image de fond dans le menu horizontal déroulant

Bonjour à toute l'équipe d'E-monsite,

Je souhaiterais faire apparaître une image de fond dans le menu horizontal déroulant de mon site. Pouvez-vous s'il vous plaît me dire quel code CSS utiliser ?

Exemple : Une image de fond sur le menu déroulant [Origine du Village jusque Aux Alentours] de l'onglet Patrimoine

Je vous remercie par avance de votre aide et de vos conseils et vous souhaite une agréable journée.

Dans l'attente de votre retour,

Bien à vous

Pascal Roussel

Bonjour Monsieur AIT MADI,

Je vous remercie pour votre aide et vos bons conseils. Je vais essayer d'appliquer votre code CSS sur mon site.

Je vous souhaite une bonne fin de journée et une bonne continuation.

Bien à vous

Pascal Roussel

Bonjour,
Sur le site https://olerando.e-monsite.com/ je souhaiterais mettre une photo également en fond de menu horizontal.
Pouvez-vous m'indiquer le code à utiliser en CSS ?
Avec mes remerciements.
Cordialement
Armand

Bonjour Pascal,

Oui, c’est possible d’ajouter une image de fond dans un menu déroulant avec un peu de CSS. Sur la plupart des thèmes, le sous-menu du menu horizontal possède une classe comme .submenu ou .dropdown-menu. Vous pouvez donc essayer un code similaire à celui-ci :

.menu li ul {
background-image: url("URL-DE-VOTRE-IMAGE");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

Remplacez simplement URL-DE-VOTRE-IMAGE par le lien direct vers votre image.
Ce code appliquera une image de fond au menu déroulant lorsque l’utilisateur survole l’onglet.

Si vous souhaitez appliquer l’image uniquement à un menu spécifique (par exemple “Patrimoine” et son sous-menu Origine du Village jusque Aux Alentours), il faudra cibler l’élément plus précisément, par exemple :

.menu li.patrimoine ul {
background-image: url("URL-DE-VOTRE-IMAGE");
}

Tout dépendra du nom des classes utilisées par votre thème. Vous pouvez vérifier cela en faisant clic droit → Inspecter l’élément sur le menu.

Sur certains sites communautaires ou plateformes de contenu (comme les pages de discussion ou de critiques de films sur Letter boxed today on utilise aussi ce type de personnalisation CSS pour améliorer l’apparence des menus tout en gardant la navigation claire. L’idée est donc la même : ajouter une image tout en conservant une bonne lisibilité du texte.

Si vous le souhaitez, vous pouvez également partager le lien de votre site, et il sera plus facile de vous proposer le code CSS exact adapté à votre menu.

Très bonne journée à vous également