Mettre une image dans le header de cassiopeia

[Jp83]

Bonjour,
sur le site les-drailles.sanary.fr, le header actuel (voir ci-dessous:

je voudrais remplacer le fond par une image ou le logo et les menus seraient conservés.
Pour avoir ce dégradé, j'ai mis dans le user.css du template cassiopeia le code suivant :
.header { background: rgb(2, 0, 36); background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(119, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);}
N'est-il pas possible de faire un background-image ?
Merci

[Helloo]

Bonjour,

Ton lien ne fonctionne pas.

En ajoutant ce code dans ton user.css ça devrait le faire :

.container-header {
  background-image: url(https://cassiopeia.joomla.com/images/banners/lavenders-6482952_1280.jpg);
}​

[Jp83]

Bonjour,
le lin : https://les-drailles.sanaryrunning.fr/
merci pour ta réponse, je vais tester ....

[Jp83]

Effectivement ça marche. Mais une répétition de l'image à lieu ... en fait je pense qu'il faut définir un 100% sur le background ? mais où ?

[Helloo]

C’est juste une image de référence qui se trouve dans mon code. Tout d’abord, il te faut insérer ta propre image.

[Jp83]

Bonjour,
Un retour sur le header .. en ajoutant : background-size: cover; dans le container, je n'ai plus ce problème.
J'ai fait un nouveau header :

Et voilà comme il ressort sur écran PC :


Si je réduis la taille de la fenêtre :

ça passe en menu pizza et affiche correctement l'image ( pizza en blanc ... faut que je le mette en noir.)

j'ai réduit la taille de l'mage (858x180) mais c'est pareil.

Si l'un d'entre-vous a la solution ?

Merci et bonne journée

[Helloo]

Bonjour,

Donc, ta première question portait sur l'insertion d'une image de fond dans l'en-tête de Cassiopeia.

Maintenant, si tu veux que l'image soit identique sur tous les écrans, il est possible que tu doives retravailler plusieurs versions de l'image pour les différents types d'écrans.

[ManuelVoileux]

Bonjour ,
je t'invite à regarder le plugin universel UP! , regarde la démo de l'action bg-image, mettre une image en fond d'un bloc de contenu.
Je suis un grand fan de UP! 143 actions qui permettent de faire a peu près tout en mode éditeur, avec un site plein d'exemples à copier -coller. Et compatible J5 sans plugin de retro-compatiblité

[Jp83]

Bonjour Manuel,
merci pour l'info, je vais étudier le fonctionnement de UP !
En fait mon problème, qui est je pense le fait que le header du template cassiopeia n'est pas responsive car les autres modules images comme slideshow CK s'adaptent automatiquement à la réduction de la taille de l'écran.
Tu peux voir sur le site : les-drailles.sanaryrunning.fr le comportement du header !
Bonne journée

[Helloo]

...qui est je pense le fait que le header du template cassiopeia n'est pas responsive...

Bonjour,

Il semble qu'il y ait une confusion à clarifier. Insérer une image de n'importe quelle taille et s'attendre à ce qu'elle s'adapte automatiquement n'a rien à voir avec « Responsive ».

[Jp83]

Oui, je fais surement une confusion ... En fait ce que je ne comprends pas c'est que l'image liée au header ne s'adapte pas automatiquement à la fenêtre !