[RÉGLÉ] Fond de site et image avec le template cassiopeia

[jchermant]

Bonjour,
Je cherche depuis un moment et je n'y arrive pas. Sous joomla 4, je cherche à mettre une image en fond d'écran qui couvre toute la fenêtre centrale du site (je ne connais pas le nom de ce corps de template).

J'ai créé un fichiers users.css dans lequel je mets ceci :
.body-site {
background-image: url(/echo/images/sampledata/cassiopeia/fond1.png);
}

L'image s'affiche bien dans la page met ne couvre pas toute la fenêtre si cette page est étroite.

Comment dois-je formuler ma demande ?
Cordialement,
Jean Claude Hermant

[dolmenhir]

Salut,
Selon l'effet souhaité, essaie ça

.body-site {
background-image: url(/echo/images/sampledata/cassiopeia/fond1.png);
background-repeat: no-repeat;
background-size: cover;
}

ou ça

.body-site {
background-image: url(/echo/images/sampledata/cassiopeia/fond1.png);
background-repeat: no-repeat;
background-size: contain;
}

Cela dit, je te déconseille de mettre une image derrière le contenu.
C'est visuellement peu ergonomique et, de toute façon, en 2021 voire 2022, on ne fait plus ça du tout (d'ailleurs on n'aurait jamais du le faire).

[jchermant]

Merci dolmenhir,
Pour le conseil, c'est un phénomène de mode ? Vu mon âge cela ne me surprendrait pas
Je vais prendre en compte ce conseil.
Je vais fermer ce post, merci pour ta réponse.

[jchermant]

Je reviens sur ta réponse, les deux écritures ne fonctionnent pas.

[dolmenhir]

Je reviens sur ta réponse, les deux écritures ne fonctionnent pas.

pourtant ça devrait.
C'est sans doute que l'image n'est pas là où elle est indiquée dans le

background-image: url(/echo/images/sampledata/cassiopeia/fond1.png);

ou qu'une autre classe fait obstacle

Si elle est bien là, tu peux essayer

.body-site {
background-image: url(/echo/images/sampledata/cassiopeia/fond1.png);
background-repeat: no-repeat;
background-size: cover !important;
}

ou

.body-site {
background-image: url(/echo/images/sampledata/cassiopeia/fond1.png);
background-repeat: no-repeat;
background-size: contain !important;
​​​​​​​}