Transparent sur IOS

[Tee shot]

Bonjour à tous,

j'ai un problème un background transparent.

dans css template, j'ai

.row-feature.row-feature-alt, .row-feature:nth-child(even)
{
background: #f7f7f7;
}

j'ai mis dans custom css :

#Mod112.row-feature:nth-child(even) {
background: transparent;
}

ça marche parfaitement sur tous les navigateur, mais sous IOS (Ipad et Iphone) le background reste désespérément #f7f7f7, je me suis dit que j'allais mettre une image png transparente

#Mod112.row-feature:nth-child(even) {
background: url(../images/blank.png);
}

la encore ça marche sur tous les navigateurs, mais toujours pas sous IOS, safari ou chrome c'est pareil ça ne marche pas.

Y a un truc particulier sous IOS?

[edit] je mets le lien, il y a peut être un conflit css, mais je ne m'en sort pas.

juste avant les codes ci dessus il y a

.row-feature {
  background:#fff;
}

il y a une image en body background, j'ai rendu .row-feature en blanc et j'ai rendu le background du module 112 transparent, mais ça ne marche sous aucun appareil avec IOS.

https://www.natours.fr/

Merci

[dolmenhir]

Salut,
Essaye un rgba

background : rgba(255,255,255, 0);

Dol.

[Tee shot]

Bonjour dolmenhir et merci pour ta proposition

Je l'ai fait, ça n'a pas marché non plus. Je pense avoir un conflit, mais je ne trouve pas.
Je mets le code dans l'ordre tel qu'il apparaît dans mon custom css.

body {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background-image: url("../images/about-bg.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  *background-position:center; */
}
.row-feature {
  background:#fff;
}
#Mod112.row-feature:nth-child(even) {
  /*background: transparent;*/
  background: url("../images/blank.png") repeat;
    /*background-color: rgba(255,255,255,0);*/
 }

et ça dans template.css

.row-feature.row-feature-alt, .row-feature:nth-child(even) {
background: #f7f7f7;
}

le but étant que le fond soit blanc sauf dans le module 112 ou le background du body apparaît par transparence (voir le site)

Merci

[dolmenhir]

si tu penses avoir un conflit, ou une classe qui prend la priorité, purge le background avec un none et rajoute un attribut "!important" à ton background et ton background-color

background:none !important;
background-color:rgba(255,255,255,0) !important;

[dolmenhir]

ce qui prend la main, c'est la ligne 3160 de ton template.css

.row-feature.row-feature-alt,
.row-feature:nth-child(even) {
  background: #f7f7f7;
}

redéfinit cette class dans ton custom qui se charge après, donc prendra la main

.row-feature.row-feature-alt,
.row-feature:nth-child(even) {
  background:none !important;
background-color:rgba(255,255,255,0) !important;
}

EDIT : attention le "nth-child(even)" s'applique à tous les "row-feature" pairs (les impairs c'est "odd")
donc cela s'appliquera à toutes les lignes paires ayant la class "row-feature"

[Tee shot]

Merci dolmenhir,

en fin de compte cela ne vient pas de la transparence, mais de la position du backgroung qui ne se centre pas sur iphone et ipad. Je ne comprend pas trop pourquoi.


j'ai mis comme code :

body {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background-image: url("../images/about-bg.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
}

et l'image part avec le scroll

solution provisoire

body {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  background-image: url("../images/about-bg.jpg");
  /*background-repeat:no-repeat;*/
  background-attachment:fixed;
}

l'image se répète et ça marche, mais au lieu d'être fixée, l'image part avec le module, ce n'est pas l'effet recherché, j'ai testé d'autre trucs, mais pour le moment c'est ce que j'ai trouvé. J'ulisie exactement le même code sur un autre site en local et ça marche parfaitement sur ipad et iphone.
Je vais aller demander au concepteur du template s'il a une solution.

Si t'as une idée je prends .

Merci