Méthode du HEAD et de la colonne :
Créer une colonne puis ajouter le code ci dessous en modifiant le numéro de la DIV
/******************** Image de fond fixe parallax avec ou sans texte *********************/
/***********Version ecran d'ordinateur ***************/
@media (min-width: 400px) { #cc-m-14049435630 { display: block!important; width: 96vw; left: calc(-50vw + 50%); position: relative; padding:40px !important; background-image: url(https://www.meduana.fr/app/download/10376097498/013-1-2.jpg?t=1453824948); background-size: cover; background-attachment: fixed; background-position: center; height:650px; }}
/***********Version ecran de smartphone***************/
@media (max-width: 400px) { #cc-m-14049435630 { display: block!important; width: 100%; left: calc(-50vw + 50%); position: relative; padding:10px !important; background-image: url(https://www.meduana.fr/app/download/10376097498/013-1-2.jpg?t=1453824948); background-size: cover; background-attachment: fixed; background-position: center; height:auto; } }
Voir exemple site : netsoleco.jimdofree.com
/******************** Image de fond fixe parallax avec ou sans texte *********************/
@media (min-width: 768px) { #cc-m-XXXXXX{ display: block!important; width: 80vw; left: calc(-50vw + 50%); position: relative; padding:10vw !important; background-image:
linear-gradient(180deg,rgba(209, 162, 89, 0.8901960784313725) 0%,rgba(222, 174, 93, 0.28)
100%),url(https://image.jimcdn.com/app/cms/image/transf/none/path/se9f98d08e2c6ed47/image/ie2a6e7426427ef0e/version/1593962838/image.jpg) ; background-blend-mode: unset; background-size:
cover; background-attachment: fixed; background-position: center; height:auto; }}
@media (max-width: 768px) { #cc-m-XXXXXX{ background-image: linear-gradient(180deg,rgba(209, 162, 89, 0.8901960784313725) 0%,rgba(222, 174, 93, 0.28)
100%),url('https://image.jimcdn.com/app/cms/image/transf/none/path/se9f98d08e2c6ed47/image/ie2a6e7426427ef0e/version/1593962838/image.jpg'); width: 100%; left: calc(-50vw + 50%); position:
relative; padding:18px !important; background-size: cover; background-position: center; height:auto;} }
Pour mettre un texte avec un fond de couleur il faut aller dans le CODE HTML et y mettre ceci :
<p style="text-align: center; background-color: powderblue; padding: 20px; margin-left: 25%; margin-right: 25%; border-radius: 10px;">Texte centré</p>
Méthode SANS HEAD et donc une seule image en fond :
Mettre le code ci dessous dans un élément HTML WIDGET
<div style="display: block!important;margin-left: -1000px;margin-right: -1000px;">
<div>
<div style=
"background-image: url(https://www.meduana.fr/app/download/10376097498/013-1-2.jpg?t=1453824948); background-size: cover; background-attachment: fixed; background-position: center; width: 100%!important; max-width: 100%; margin: 25px 0;height:650px;">
</div>
</div>
</div>
Dernière mise à jour : 02/07/2024