[Résolu] L'arrière-plan sur iPad
3 participants
Communauté francophone - Jimdo :: Utiliser Jimdo :: Utilisation des éléments Jimdo :: Fonction arrière-plan
Page 2 sur 3
Page 2 sur 3 • 1, 2, 3
Re: [Résolu] L'arrière-plan sur iPad
L'arrière-plan n'est toujours pas fixe. Et surtout, il n'est plus en plein écran à présent.
Re: [Résolu] L'arrière-plan sur iPad
Ok. Essayons autre chose
Le comportement que tu veux obtenir sur ipad, c'est :
Fixe, en haut, mais à l'échelle de la fenêtre ?
Il doit être possible de faire varier les valeurs liées au background, une à une, pour voir ce qui pourrait convenir sur ipad.
notamment la valeur "cover" (qui peut prendre diverses valeurs : auto/contain ou des valeurs de %)
Ensuite, il suffira de faire une version pour les autres cas avec la balise @media (et là, tu sais déjà ce qui fonctionne)
Il faudrait - avant tout - essayer un truc idiot : changer la valeur d'index du body. Je ne vois pas comment, mais un Internaute dit qu'il aurait résolu le soucis grâce à cela.
Revient à la première version du code, et rajoute juste dans .body {
Le comportement que tu veux obtenir sur ipad, c'est :
Fixe, en haut, mais à l'échelle de la fenêtre ?
Il doit être possible de faire varier les valeurs liées au background, une à une, pour voir ce qui pourrait convenir sur ipad.
notamment la valeur "cover" (qui peut prendre diverses valeurs : auto/contain ou des valeurs de %)
Ensuite, il suffira de faire une version pour les autres cas avec la balise @media (et là, tu sais déjà ce qui fonctionne)
Il faudrait - avant tout - essayer un truc idiot : changer la valeur d'index du body. Je ne vois pas comment, mais un Internaute dit qu'il aurait résolu le soucis grâce à cela.
Revient à la première version du code, et rajoute juste dans .body {
- Code:
z-index:-1!important
Re: [Résolu] L'arrière-plan sur iPad
Oui, fixe en haut, et qui s'adapte à TOUTES les fenêtres. On ne sait pas avec quoi les gens visitent...
Pourquoi ça marche avec le diaporama et pas avec l'image unique ?
Pourquoi ça marche avec le diaporama et pas avec l'image unique ?
Re: [Résolu] L'arrière-plan sur iPad
Oui, mais on note que le fait d'enlever la valeur "fixed" retire le bug de l'affichage hyper grand du BG sur ipad.L'arrière-plan n'est toujours pas fixe. Et surtout, il n'est plus en plein écran à présent.
n'spas ?
Re: [Résolu] L'arrière-plan sur iPad
Ça enlève la déformation de l'image oui..
Mais comme je n'ai plus l'arrière-plan que sur une hauteur d'écran, c'est très très moche si le contenu fait plus d'une hauteur d'écran.
On arrive aussi à ce résultat en cochant par Jimdo l'image unique de la manière suivante :
image unique -
Répétition de l'image de fond :
aucune ✔
totale
horizontale
verticale
plein écran
Seulement, ça n'est pas l'idéal lorsque l'on souhaite un background de contenu en transparence.
Mais comme je n'ai plus l'arrière-plan que sur une hauteur d'écran, c'est très très moche si le contenu fait plus d'une hauteur d'écran.
On arrive aussi à ce résultat en cochant par Jimdo l'image unique de la manière suivante :
image unique -
Répétition de l'image de fond :
aucune ✔
totale
horizontale
verticale
plein écran
Seulement, ça n'est pas l'idéal lorsque l'on souhaite un background de contenu en transparence.
Re: [Résolu] L'arrière-plan sur iPad
- Code:
<style type="text/css">
/*<![CDATA[*/
.body {z-index:-1!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>
J'ai ajouté le bout de code. C'est comme au départ
Re: [Résolu] L'arrière-plan sur iPad
L'idée est de paramétrer le BG UNIQUEMENT pour les ipad, donc, on peut éviter d'avoir un arrière-plan trop petit en hauteur, car on connait la dimension des écrans.Mais comme je n'ai plus l'arrière-plan que sur une hauteur d'écran, c'est très très moche si le contenu fait plus d'une hauteur d'écran.
Bon, le z-index à -1, j'aurai été étonné que ça fonctionne, mais il fallait essayer.
Il faut trouver une combinaison de valeurs qui fonctionne pour ipad, sans se préoccuper des autres cas pour l'instant.
Annules et remplaces le code précédent,
Est-ce que cela fonctionne sur ipad : (essayer dans les deux orientations)
- Code:
<style type="text/css">
/*<![CDATA[*/
.body {
-background-size: 2000px 1250px!important;
-webkit-background-size: 2000px 1250px !important;
-moz-background-size: 2000px 1250px!important;
-o-background-size: 2000px 1250px!important;
background-position: 20% top!important;
background-repeat: no-repeat!important;}
/*]]>*/
</style>
Ce serait pas mal de changer la couleur d'arrière plan aussi, elle est blanche. si elle était de la même teinte que le bleu sombre du BG, ça peut limiter les dégâts.
Re: [Résolu] L'arrière-plan sur iPad
Avec ce dernier code...
Pour les dimensions ; En position portrait de l'iPad (verticale), oui. En position paysage (horizontale), non. Beaucoup trop gros.
Le background n'est pas fixe. Dès que l'on défile, il remonte encore et laisse place au bleu sombre
Pour les dimensions ; En position portrait de l'iPad (verticale), oui. En position paysage (horizontale), non. Beaucoup trop gros.
Le background n'est pas fixe. Dès que l'on défile, il remonte encore et laisse place au bleu sombre
Re: [Résolu] L'arrière-plan sur iPad
Ceci dit, je n'ai jamais vu un arrière-plan fixe sur iPad avec un design Jimdo.
Certains, comme là, gèrent mieux cette défaillance avec un "solid background" de contenu. (opaque)
Certains, comme là, gèrent mieux cette défaillance avec un "solid background" de contenu. (opaque)
Re: [Résolu] L'arrière-plan sur iPad
Solie a écrit: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>
Notons qu'avec ce code d'hier, les dimensions portrait & paysage étaient parfaites. Si l'arrière-plan avait pu être fixé, le fait qu'il ne soit plus en plein écran n'aurait pas été gênant pour un iPad.
Parce que je réalise... A l'affichage TOP d'une page... Il était en plein écran en fait... C'est parce qu'il n'est pas fixé et qu'il bouge au défilement que ça flingue tout, n'est-ce pas ?
Et si on disait que le background attachment fixed était important aussi ?
Re: [Résolu] L'arrière-plan sur iPad
Oui, exactement…
Avec mon nouveau code, il devrait être en "fixed", car il l'est par défaut via Jimdo.
C'est vraiment cet aspect (background-attachment:fixed) qui est mal géré par l'ipad, cela se confirme dans tes descriptions des divers codes.
Avec mon nouveau code, il devrait être en "fixed", car il l'est par défaut via Jimdo.
C'est vraiment cet aspect (background-attachment:fixed) qui est mal géré par l'ipad, cela se confirme dans tes descriptions des divers codes.
Je crois que je comprends mal la différence. Le fait que le contenu soit sur fond transparent ou opaque ne devrait rien changer au background de la body ?Ceci dit, je n'ai jamais vu un arrière-plan fixe sur iPad avec un design Jimdo.
Certains, comme là, gèrent mieux cette défaillance avec un "solid background" de contenu. (opaque)
Re: [Résolu] L'arrière-plan sur iPad
C'est fou, ça, la dimension est imposée en pixel, comment le BG peut-il s'agrandir ?Avec ce dernier code...
Pour les dimensions ; En position portrait de l'iPad (verticale), oui. En position paysage (horizontale), non. Beaucoup trop gros.
Pourtant le background-attachment est bien sur "fixed".
Le background n'est pas fixe. Dès que l'on défile, il remonte encore et laisse place au bleu sombre
Re: [Résolu] L'arrière-plan sur iPad
Il y aurait bien la solution de créer une DIV dans la Sidebar, avec du code, qui se placerait à la place du background pour simuler un fond… mais alors, bonjour la galère question z-index, position relative, overflow…
Sans doute as-tu trouvé la meilleure solution avec le diaporama d'une seule image !
Sans doute as-tu trouvé la meilleure solution avec le diaporama d'une seule image !
Re: [Résolu] L'arrière-plan sur iPad
FredVig a écrit:Oui, exactement…Je crois que je comprends mal la différence. Le fait que le contenu soit sur fond transparent ou opaque ne devrait rien changer au background de la body ?Ceci dit, je n'ai jamais vu un arrière-plan fixe sur iPad avec un design Jimdo.
Certains, comme là, gèrent mieux cette défaillance avec un "solid background" de contenu. (opaque)
Dans l'exemple, tu vois l'arrière-plan fixé sur ton ordi. Cet arrière-plan n'est pas fixé non plus avec un iPad bien-sûr. Cependant, c'est beaucoup moins gênant car le contenu et le footer sont complètement opaques. Au défilement, l'arrière-plan (non-fixé) monte vers le haut. Mais on s'en fout puisqu'on ne voit pas à travers le background de contenu. La partie inférieure de l'arrière-plan étant cachée derrière le contenu et la sidebar opaques, le rendu crade n'est pas visible.
Alors qu'avec un fond de contenu en transparence, forcément on visualise très bien la catastrophe à l'arrière
Re: [Résolu] L'arrière-plan sur iPad
[quote="FredVig"]
Oui mais on n'a pas mis ! Important
Donne-moi ce 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>
... Avec ! Important sur le background attachment fixed s'il te plaît
Pourtant le background-attachment est bien sur "fixed".
Oui mais on n'a pas mis ! Important
Donne-moi ce 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>
... Avec ! Important sur le background attachment fixed s'il te plaît
Re: [Résolu] L'arrière-plan sur iPad
Je doute que cela fonctionne mais pourquoi pas…
- Code:
<style type="text/css">
/*<![CDATA[*/
.body {background-attachment:fixed!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;}}
/*]]>*/
Re: [Résolu] L'arrière-plan sur iPad
Tu pourras essayer aussi de placer le background dans la sidebar :
(ici, je transforme l'élément "espacement" situé dans ta sidebar en background)
(ici, je transforme l'élément "espacement" situé dans ta sidebar en background)
- Code:
<style type="text/css">
/*<![CDATA[*/
#cc-m-11633516127 > div:nth-child(1){
position: fixed;
background-image: url("http://u.jimdo.com/www400/o/s868edc3e07fff863/img/i8c6228dbe4b5bcd4/1427003177/orig/image.png");
top: -20px;
left: 0px;
z-index: -1;
height: 100%;
width: 100%;
background-size: cover;}
/*]]>*/
Re: [Résolu] L'arrière-plan sur iPad
Merci, je vais essayer tout ça. Tu auras des News demain matin. Bonne nuit
Re: [Résolu] L'arrière-plan sur iPad
Tu as vu juste, cela ne fonctionne pasFredVig a écrit:Je doute que cela fonctionne mais pourquoi pas…
J'ai donc mis le deuxième code. Je ne vois rien de différent. Et toi, tu remarques quelque chose ?
Re: [Résolu] L'arrière-plan sur iPad
Il ya des erreurs dans mon code :
ça, c'est mieux :
ça, c'est mieux :
- Code:
/*<![CDATA[*/
#cc-m-11633516127 > div:nth-child(1){
position: fixed;
background-image: url("http://u.jimdo.com/www400/o/s868edc3e07fff863/img/i8c6228dbe4b5bcd4/1427003177/orig/image.png");
top: 0px;
left: 0px;
z-index: -1;
height: 100%!important;
width: 100%!important;
background-size: cover;}
/*]]>*/
Re: [Résolu] L'arrière-plan sur iPad
La body, le background ?
Pour que le bleu sombre uni remplace l'arrière-plan, il faut que j'écrase l'image de l'arrière-plan. Je crains que l'adresse url présente dans le code ci-dessus n'aboutisse nulle part après ceci. Sauf si tu as relevé l'adresse url sur voixoff. Peux-tu me confirmer ?
Pour que le bleu sombre uni remplace l'arrière-plan, il faut que j'écrase l'image de l'arrière-plan. Je crains que l'adresse url présente dans le code ci-dessus n'aboutisse nulle part après ceci. Sauf si tu as relevé l'adresse url sur voixoff. Peux-tu me confirmer ?
Re: [Résolu] L'arrière-plan sur iPad
hum… tu as raison.
Laisse-donc l'arrière plan
ça ne devrait pas gêner
Laisse-donc l'arrière plan
ça ne devrait pas gêner
Re: [Résolu] L'arrière-plan sur iPad
oups ! Je crois que j'ai fait une grosse bêtise dans la recomposition du code...
J'ai d'abord écrasé l'image du site test. Comme je ne sais pas récupérer l'adresse url depuis voixoff, j'ai récupéré une adresse de cette image sur le web, je l'ai placé sur ton code.
Jimdo n'enregistrait pas le code, alors j'ai ajouté <style> en bas et <style type="text/css"> en haut.
Jimdo a pris mon code, mais le fond est tout bleu
- Code:
<style type="text/css">
/*<![CDATA[*/
#cc-m-11633516127 > div:nth-child(1){
position: fixed;
background-image: url("http://www.wallpapersource.co/wp-content/uploads/2014/09/ripples_circle_flat_design_hd_free_wallpaper.png");
top: 0px;
left: 0px;
z-index: -1;
height: 100%!important;
width: 100%!important;
background-size: cover;}
/*]]>*/
</style>
J'ai d'abord écrasé l'image du site test. Comme je ne sais pas récupérer l'adresse url depuis voixoff, j'ai récupéré une adresse de cette image sur le web, je l'ai placé sur ton code.
Jimdo n'enregistrait pas le code, alors j'ai ajouté <style> en bas et <style type="text/css"> en haut.
Jimdo a pris mon code, mais le fond est tout bleu
Re: [Résolu] L'arrière-plan sur iPad
Alors…
- Code:
<style type="text/css">
/*<![CDATA[*/
#cc-m-11633516127 > div:nth-child(1){
position: fixed;
background-image: url("http://u.jimdo.com/www400/o/sc222fcd30ab1fe50/img/i942b72d502d1e0f5/1434071764/orig/image.png");
top: 0px;
left: 0px;
z-index: -1;
height: 100%!important;
width: 100%!important;
background-size: cover;}
/*]]>*/
Page 2 sur 3 • 1, 2, 3
Sujets similaires
» [Résolu] Supprimer l'animation "slider" de l'arrière-plan (retirée par Jimdo)
» Image de fond n'apparaît pas sur tablet (bug Ipad résolu)
» [Résolu] Arrière-plan différent en en fonction des pages
» [Résolu] Fond blanc avant l'image d'arrière-plan
» [Résolu] Design Cairo : Arrière-plan zone grise
» Image de fond n'apparaît pas sur tablet (bug Ipad résolu)
» [Résolu] Arrière-plan différent en en fonction des pages
» [Résolu] Fond blanc avant l'image d'arrière-plan
» [Résolu] Design Cairo : Arrière-plan zone grise
Communauté francophone - Jimdo :: Utiliser Jimdo :: Utilisation des éléments Jimdo :: Fonction arrière-plan
Page 2 sur 3
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|