[Résolu] L'arrière-plan sur iPad

[Solie]

D'accord, on va essayer de régler ce problème d'affichage de l'arrière-plan sur iPad avec une méthode plus correcte que la mienne.

Je rappelle (pour les visiteurs de ce topic) que j'affiche depuis plusieurs mois mon image d'arrière-plan par le biais du mode "Diaporama" pour avoir un rendu fixe de l'image et un défilement correct du contenu en transparence par dessus l'image, sans l'entraîner. Le tout, sans aucune déformation de celle-ci. Bref, c'est la seule méthode que j'ai trouvé pour obtenir le même rendu qu'avec un ordinateur.

Sur mon site test, figurent les indications de réglages. Le site test est en image unique plein écran. Mon site pro est en diaporama une seule image.

Vu qu'il est très compliqué pour Jimdo de corriger son erreur de code, je doute qu'il nous soit possible d'insérer avec du code un arrière-plan propre sur iPad sans nous servir du diaporama.

Bon, notre expert veut tenter de corriger cela. C'est un challenge, je le laisse travailler...

Je te remercie FredVig  

Solie



EDIT 1 / Inutile de lire tous les échanges de ce topic.
Offrir un rendu propre de votre arrière-plan sur iPad ? Oui, c'est possible ! Grâce à l'excellent Jimdo Expert FredVig, qui a trouvé "LE CODE" en page 2.

En voici les détails ;

Et bé… !
J'ai pas été trop rapide sur ce coup quand même !

Donc, en résumé, pour afficher un fond d'écran fixe et unique sur Ipad, (et contrer, ce faisant, le vilain Bugg qui frappe IOS sur IPad   )
Soit vous utilisez l'affichage diapo avec une seule image (comme expliqué par Solie sur son site* (belle trouvaille !   )
Soit…
Vous chargez le background dans une div - par exemple, un spacer placé dans la sidebar - en changeant ses paramètres grâce à modifier le Head.
Le code ressemblera à ceci :

Code:

<style type="text/css">
    /*<![CDATA[*/
        #identifiantDeVotreSpacer{
        position: fixed;
        background-image: url("http://adresseUrlDeVotreBackground");
        top: 0px;
        left: 0px;
        z-index: -1;
        height: 100%!important;
        width: 100%!important;
        background-size: cover;}
        /*]]>*/

HupPupPup…BAaarbatruc !

Méthode sans code :

Le problème étant résolu, le lien vers mon site test* est désactivé.
Voici donc, sans code, comment l'arrière-plan de votre site peut être fixé, en plein écran et non déformé depuis une tablette iPad.

Chemin : Design >> Arrière-plan >> Fond Personnalisé

Diaporama
Inutile d'uploader deux fois la même image, une seule fois suffit.

Options pour l'arrière-plan :
Vous pouvez ici paramétrer l'affichage de votre arrière-plan.

Effets du changement d'images :
aucune
fondu enchaîné
vers la gauche
vers la droite
vers le haut
vers le bas

Rapidité du changement d'images :
rapide
normal
lent

------

EDIT 2 / La fonction Arrière-plan a subi un gros changement en 2016, mais elle permet toujours de corriger ce bug sur iPad.

Pour plus d'infos, reportez-vous au post suivant :
http://www.jimdoforum.fr/t607p50-l-arriere-plan-sur-ipad#5625


Récapitulatif

Méthode avec code :

1) hébergez l'image de votre arrière-plan dans une page cachée de votre site.
   (copiez l'adresse de l'image en mode visiteur)
2) ajoutez un module espacement dans votre Sidebar.
   (copiez le sélecteur unique de cet espacement avec l'inspecteur de votre navigateur)

Code:

<style type="text/css">
    /*<![CDATA[*/
        #cc-m-0000000000 le numéro du sélecteur unique de votre espacement placé au préalable dans votre sidebar > div:nth-child(1){
        position: fixed;
        background-image: url("http://xxxxx-l-url-de-votre-image-a-vous-xxxxx.png");
        top: 0px;
        left: 0px;
        z-index: -1;
        height: 100%!important;
        width: 100%!important;
        background-size: cover;}
        /*]]>*/

Méthode simple (sans code) :

Chemin : Paramètres > Design (ou Style) > Arrière-plan

2) Cliquez sur le carré + et choisissez Diaporama

3) Uploadez deux ou trois fois la même image

4) Réglez la vitesse sur "lent" (à cause du fondu)

4) Enregistrez.

Un grand merci à FredVig, le vrai ! 

[FredVig]

tu devrais préciser où est le problème, car tous le monde n'a pas d'ipad
D'après ce que j'ai compris, sur ipad, l'image unique "bouge" avec les éléments de la page.
Il y a un soucis avec la transparence également, mais je ne peux voir lequel.
C'est aussi le cas sur ton site de test. Cela vient du réglage par défaut du background sur ce design. Il est prévu - justement - pour remplir le fond de page quelquesoit la fenêtre.
C'est un objectif responsive, mais qui ne te convient pas, puisque tu veux un fond fixe.
L'astuce du diaporama n'est pas entièrement satisfaisante, comme tu l'a remarqué.
donc…
recherche de code pour fixer le brol

[Solie]

J'ai essayé d'être précise. C'est très difficile d'expliquer juste avec des mots. En visitant mon site test avec un iPad, tu comprendrais de suite ce que le support et moi-même avons voulu dire.

Je n'ai pas noté de souci avec la transparence du background de ce que j'appelle le "contenu". Je l'ai moi-même réglé autour de 0.8, et ça me plaît. Tu as relevé un souci ?

Dans l'idéal, je souhaiterais que l'arrière plan (figure courbe jaune-verte-bleue) de mon site apparaisse sur les iPads exactement tel que tu le vois sur ton ordinateur, sans avoir besoin de passer par le mode diaporama, puisque tu me dis que cette fonction ralentit considérablement mon site. Cette fonction assure heureusement sur iPad un défilement propre du contenu au dessus de l'arrière-plan (et non avec). Aussi, elle n'engendre aucune déformation visuelle de celui-ci.

Si l'on choisit les fonctions "Image unique" ou "Au hasard", l'arrière-plan est déformé sur iPad à cause d'une erreur de développement très compliquée à corriger pour Jimdo. Voir le message du support Jimdo.

[Solie]

Captures d'écran iPad
- En haut, 2 arrière-plans en mode "Diaporama"
- En bas, les mêmes arrière-plans, mais en mode "Image Unique"

[FredVig]

- Ok pour la transparence, j'avais mal compris.
- Effectivement, mes possibilités d'intervention sont limitées sans un Ipad, du même modèle qui plus est.
- "je souhaiterais que l'arrière plan apparaisse sur les iPads exactement tel que tu le vois sur ton ordinateur," Le soucis que je veux relever, c'est que cet arrière-plan n’apparait jamais de la même façon étant donné qu'il remplit la page navigateur.
En tout cas, il est fixe en haut, mais variable en hauteur et largeur. Le cercle vert "se balade" par rapport à ton logo.
C'est à ce niveau qu'il est possible "d'imposer" un comportement sans doute plus prévisible à ton arrière-plan. Je vais voir …

[Solie]

Voilà c'est super ! Qu'on ne voit pas les côtés sur iPad c'est normal. Sur les ordis, il est fixe en haut, c'est cela oui, qu'il faudrait pouvoir imposer sur iPad. Et lorsqu'il sera fixe, ça n'engendrera plus aucune déformation de l'image le cercle vert se balade... Voilà autre chose Lol
Merci Fred, bonne journée

[FredVig]

En cherchant sur google, on s'aperçoit que le problème est  documenté.
Le bug vient de l'interprétation par IOs (Safari, les ipad, donc) de la valeur background-attachment :fixed
Une solution propose de remplacer tout ce qui "pilote" les réactions du background
en l'occurrence, sur ton site, c'est :

Code:

   background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    display: block;
    margin: 0px !important;
    padding: 0px !important;
    min-width: 100%;
    min-height: 100%;
    height: auto !important;
  

par ceci :

Code:

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;

il faut également ajouter une ligne pour le cas des grands écrans
à base de "media query"
@media only screen and (min-width: 768px) {.classeDuBackground {background-attachment: fixed;}}
dans ton cas, la class est en fait une div… :
div#cc-jimdo-bgr-slider ul li
donc le code à tester (j'ai pas d'ipad…)

Code:

div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li{background-size: cover!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
height: 100%!important;
width: 100%!important;
background-position: center center!important;
background-repeat: no-repeat!important;}
@media only screen and (min-width: 768px) {div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li {background-attachment: fixed;}}

Alors, évidemment, c'est une base à adapter à la situation et au comportement espéré.
Il faudra surement adapter (P.Ex : les indications de position absolute sont-elle utiles ?)
L'idée directrice est de remplacer le background-attachment :fixed par du code que reconnait IOs.
Il existe de nombreux tutos et discussions sur le net Le mieux est de faire sa propre recherche.
source :
full-page-backgrounds-on-ios-background-size-cover

[FredVig]

Et… probablement, si tu mets ton arrière-plan en image unique fixe à partir de l'interface Jimdo, ofcourse, ça va changer le nom (id) de son contenant. à mettre à la place de

Code:

cc-jimdo-bgr-slider

[Solie]

Euh... Il est complet le code <> ?
Je vais vérifier le comportement sur Mac avec Safari en attendant la réponse.

[FredVig]

C'est juste une piste de recherche.

[Solie]

Ok, apparement c'est vraiment un bug d'interprétation du plein-écran sous iOs iPad, et iPhone aussi je présume pour les sites responsifs... Et ce problème ne toucherait pas que nos sites Jimdo. C'est cela ? Même mon très vieux Mac sous Safari version 5.0.6 interprète correctement l'arrière-plan de mon site test. On pourra commencer par tenter des codes sur le site test. Ce sera moins embêtant si cela engendre des erreurs avec les autres navigateurs

Dans ton lien, déjà, s'ils parlaient en français, j'aurais du mal. Là, c'est un peu costaud pour moi. Par contre, ça n'a rien à voir mais j'aime beaucoup les colonnes box noires de la sidebar de ce site !

[FredVig]

Oui, c'est ça. Un bug de l'interprétation de valeur background-attachment :fixed.
ça touche le Safari sur les portables.

Voilà ce que je propose :
- changes l’arrière-plan par un module fixe sur le site de ton choix
- récupères l'identifiant de l’arrière-plan (clic-droit>inspecter l'élément>copier l'identifiant unique)
- prends mon code en remplaçant l'id "cc-jimdo-bgr-slider" par ton nouvel identifiant
- Colles le code dans "paramètre>modifier le head" (avec des balises de déclaration de css, comme d'hab')
- fais des essais sur ipad du site ainsi modifié.
- Selon les résultats, il est possible d'ajuster le code.
Ce code ne change que les navigateurs mobiles.
Il est un peu différent de ce que jimdo génère, mais le résultat devrait être le même.

[Solie]

Ici, mon arrière-plan image unique plein écran.

avec l'inspecteur, je trouve ceci

div#cc-jimdo-bgr-slider, div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li, div#cc-inner {
   min-width: 100%;
   min-height: 100%;
   height: auto !important;
   overflow: hidden !important;
   position: absolute;
}

----

avec firebug, je trouve ceci

div#cc-jimdo-bgr-slider, div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li, div#cc-inner {
   height: auto !important;
   min-height: 100%;
   min-width: 100%;
   overflow: hidden !important;
   position: absolute;
}

----

Et voici ton code

div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li{background-size: cover!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
height: 100%!important;
width: 100%!important;
background-position: center center!important;
background-repeat: no-repeat!important;}
@media only screen and (min-width: 768px) {div#cc-jimdo-bgr-slider ul, div#cc-jimdo-bgr-slider ul li {background-attachment: fixed;}}

----

à mettre là-dedans

<style type="text/css">
/*<![CDATA[*/

/*]]>*/
</style>

----

Mais en changeant

cc-jimdo-bgr-slider

----

Je suis désolée, je ne comprends pas...

[FredVig]

Rien de compliqué :
Actuellement, ton background est en "mode diaporama".
(justement pour contourner les problèmes que tu as rencontré)
Tu dois avant tout, changer ce mode, et passer en image fixe.
Ensuite, tu pourras récupérer l'identifiant.
(actuellement, l'identifiant est "cc-jimdo-bgr-slider", comme tu l'as vérifié, mais il va changer en "mode fixe")

Je modifie ce message car :
Je vois que tu as déjà changé le mode, et c'est un site de test.
L'image est en fixe dans la balise .body
sur voix off, elle est dans le "cc-jimdo-bgr-slider".
Ok, je regarde !

[FredVig]

Donc, le code à tester sur ipad est - pour ton site http://voixoffparis.jimdo.com/ :

Code:

<style type="text/css">
/*<![CDATA[*/
.body {background-size: cover!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
height: 100%!important;
width: 100%!important;
background-position: center center!important;
background-repeat: no-repeat!important;}
@media only screen and (min-width: 768px) {.body {background-attachment: fixed;}}
/*]]>*/
</style>

[Solie]

C'est ce que j'ai fait vendredi sur mon site de test ! Je te l'assure.
Je ne sais pas pourquoi il est indiqué slider... C'est peut-être cela l'erreur de code de Jimdo.

Je viens d'aller vérifier.
Le background est bien réglé ainsi:

image unique en plein écran
Options pour l'arrière-plan :
Vous pouvez ici paramétrer l'affichage de votre arrière-plan.

Répétition de l'image de fond :
aucune
totale
horizontale
verticale
plein écran ✔

[Solie]

Donc, le code à tester sur ipad est - pour ton site http://voixoffparis.jimdo.com/ :

Code:

<style type="text/css">
/*<![CDATA[*/
.body {background-size: cover!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
height: 100%!important;
width: 100%!important;
background-position: center center!important;
background-repeat: no-repeat!important;}
@media only screen and (min-width: 768px) {.body {background-attachment: fixed;}}
/*]]>*/
</style>

Ah, tu n'avais pas regardé la page que j'avais créée à ton attention, hein...
Cool, je vais essayer le code

[FredVig]

Désolé, mais j'ai saisi maintenant.
Et j'ai modifié mon message pendant que tu écrivais le tien sans doute.
(sinon, ça serait trop facile…)

[Solie]

Ça n'a rien changé malheureusement. L'image est toujours déformée et non fixée. Elle suit le contenu. Voir la photo du bas.

[Solie]

Rigole ! Tu vas être content, c'est pas facile

[FredVig]

ALors je pense que…
Le but est de proposer autre chose aux ipad que "background attachment:fixed", pasqu'ils savent pas quoi en faire. d'où le code alternatif.
Mais…
Jimdo continue de le mettre par défaut, en plus du reste.
Donc… ?

[Solie]

Précisons que lorsque le contenu est nul, ou presque, l'image n'est pas déformée...

[FredVig]

… donc il faut remettre la valeur initiale à savoir background-attachment :scroll ?
à tester !
ajouter au code : background-attachment:scroll!important;
juste après la première {

[Solie]

J'ai une mini fenêtre pour modifier le head. Je dois dézoomer avec mon mini portable Asus pour qu'elle s'ouvre. Les caractères du code sont réduits à 2 pixels. Le mieux est de remplacer le code en entier.

Tu veux bien me donner le code en entier avec ton ajout au bon endroit s'il te plaît ?

[Solie]

J'ai préparé ça dans un doc rtf. On y voit mieux. J'ai également ajouté un tiret devant le truc suivant pour que ça ressemble au reste (je ne sais pas si il fallait).

Voici le nouveau code :

<style type="text/css">
/*<![CDATA[*/
.body {background-attachment:scroll!important;
-background-size: cover!important;
-webkit-background-size: cover!important;
-moz-background-size: cover!important;
-o-background-size: cover!important;
height: 100%!important;
width: 100%!important;
background-position: center center!important;
background-repeat: no-repeat!important;}
@media only screen and (min-width: 768px) {.body {background-attachment: fixed;}}
/*]]>*/
</style>

[Contenu sponsorisé]