Image de fond du forum qui se répéte.

[IriXa]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://outre-mer-le-forum.latchatche.net/

Description du problème

Bonsoir,
L'image de fond du forum se répète, j'ai pourtant désactivé le format de servimg à l'enregistrement.



Merci à la personne qui pourra m'aider à placer cette image avec un petit script pour le css

IriXa.

[IriXa]

Up.

J'ai essayé les scripts trouvés ici et là, mais cela ne fonctionne pas. Avant j'avais une image unie, donc on ne voyait pas si cela se répétait, mais là j'ai mis une image marine ...

C'est phpBB2 au cas où quelqu'un souhaiterait m'aider.

Bonne journée ensoleillée et ciel bleu à vous.

[IriXa]

Up.

[Adam_sfp]

Bonjour

J'ai déjà utiliser ce script qui fonctionne plutôt bien
https://github.com/jquery-backstretch/jquery-backstretch

Vous pouvez le mettre dans gestion des codes javascripts sur toutes les pages.
Et il possède quelques options.

Pour mettre une seule image en background
Mettez ce code

Code:

/*! Backstretch - v2.0.4 - 2013-06-19
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2013 Scott Robbin; Licensed MIT */


$(document).ready(function() {
  (function(a, d, p) {
    a.fn.backstretch = function(c, b) {
      (c === p || 0 === c.length) && a.error("No images were supplied for Backstretch");
      0 === a(d).scrollTop() && d.scrollTo(0, 0);
      return this.each(function() {
        var d = a(this), g = d.data("backstretch");
        if (g) {
          if ("string" == typeof c && "function" == typeof g[c]) {
            g[c](b);
            return;
          }
          b = a.extend(g.options, b);
          g.destroy(!0);
        }
        g = new q(this, c, b);
        d.data("backstretch", g);
      });
    };
    a.backstretch = function(c, b) {
      return a("body").backstretch(c, b).data("backstretch");
    };
    a.expr[":"].backstretch = function(c) {
      return a(c).data("backstretch") !== p;
    };
    a.fn.backstretch.defaults = {centeredX:!0, centeredY:!0, duration:5E3, fade:0};
    var r = {left:0, top:0, overflow:"hidden", margin:0, padding:0, height:"100%", width:"100%", zIndex:-999999}, s = {position:"absolute", display:"none", margin:0, padding:0, border:"none", width:"auto", height:"auto", maxHeight:"none", maxWidth:"none", zIndex:-999999}, q = function(c, b, e) {
      this.options = a.extend({}, a.fn.backstretch.defaults, e || {});
      this.images = a.isArray(b) ? b : [b];
      a.each(this.images, function() {
        a("<img />")[0].src = this;
      });
      this.isBody = c === document.body;
      this.$container = a(c);
      this.$root = this.isBody ? l ? a(d) : a(document) : this.$container;
      c = this.$container.children(".backstretch").first();
      this.$wrap = c.length ? c : a('<div class="backstretch"></div>').css(r).appendTo(this.$container);
      this.isBody || (c = this.$container.css("position"), b = this.$container.css("zIndex"), this.$container.css({position:"static" === c ? "relative" : c, zIndex:"auto" === b ? 0 : b, background:"none"}), this.$wrap.css({zIndex:-999998}));
      this.$wrap.css({position:this.isBody && l ? "fixed" : "absolute"});
      this.index = 0;
      this.show(this.index);
      a(d).on("resize.backstretch", a.proxy(this.resize, this)).on("orientationchange.backstretch", a.proxy(function() {
        this.isBody && 0 === d.pageYOffset && (d.scrollTo(0, 1), this.resize());
      }, this));
    };
    q.prototype = {resize:function() {
      try {
        var a = {left:0, top:0}, b = this.isBody ? this.$root.width() : this.$root.innerWidth(), e = b, g = this.isBody ? d.innerHeight ? d.innerHeight : this.$root.height() : this.$root.innerHeight(), j = e / this.$img.data("ratio"), f;
        j >= g ? (f = (j - g) / 2, this.options.centeredY && (a.top = "-" + f + "px")) : (j = g, e = j * this.$img.data("ratio"), f = (e - b) / 2, this.options.centeredX && (a.left = "-" + f + "px"));
        this.$wrap.css({width:b, height:g}).find("img:not(.deleteable)").css({width:e, height:j}).css(a);
      } catch (h$0) {
      }
      return this;
    }, show:function(c) {
      if (!(Math.abs(c) > this.images.length - 1)) {
        var b = this, e = b.$wrap.find("img").addClass("deleteable"), d = {relatedTarget:b.$container[0]};
        b.$container.trigger(a.Event("backstretch.before", d), [b, c]);
        this.index = c;
        clearInterval(b.interval);
        b.$img = a("<img />").css(s).bind("load", function(f) {
          var h = this.width || a(f.target).width();
          f = this.height || a(f.target).height();
          a(this).data("ratio", h / f);
          a(this).fadeIn(b.options.speed || b.options.fade, function() {
            e.remove();
            b.paused || b.cycle();
            a(["after", "show"]).each(function() {
              b.$container.trigger(a.Event("backstretch." + this, d), [b, c]);
            });
          });
          b.resize();
        }).appendTo(b.$wrap);
        b.$img.attr("src", b.images[c]);
        return b;
      }
    }, next:function() {
      return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0);
    }, prev:function() {
      return this.show(0 === this.index ? this.images.length - 1 : this.index - 1);
    }, pause:function() {
      this.paused = !0;
      return this;
    }, resume:function() {
      this.paused = !1;
      this.next();
      return this;
    }, cycle:function() {
      1 < this.images.length && (clearInterval(this.interval), this.interval = setInterval(a.proxy(function() {
        this.paused || this.next();
      }, this), this.options.duration));
      return this;
    }, destroy:function(c) {
      a(d).off("resize.backstretch orientationchange.backstretch");
      clearInterval(this.interval);
      c || this.$wrap.remove();
      this.$container.removeData("backstretch");
    }};
    var l, f = navigator.userAgent, m = navigator.platform, e = f.match(/AppleWebKit\/([0-9]+)/), e = !!e && e[1], h = f.match(/Fennec\/([0-9]+)/), h = !!h && h[1], n = f.match(/Opera Mobi\/([0-9]+)/), t = !!n && n[1], k = f.match(/MSIE ([0-9]+)/), k = !!k && k[1];
    l = !((-1 < m.indexOf("iPhone") || -1 < m.indexOf("iPad") || -1 < m.indexOf("iPod")) && e && 534 > e || d.operamini && "[object OperaMini]" === {}.toString.call(d.operamini) || n && 7458 > t || -1 < f.indexOf("Android") && e && 533 > e || h && 6 > h || "palmGetResource" in d && e && 534 > e || -1 < f.indexOf("MeeGo") && -1 < f.indexOf("NokiaBrowser/8.5.0") || k && 6 >= k);
  })(jQuery, window);



 $.backstretch("https://i.goopics.net/yowqV.png");
 
       
 
});

Tout à la fin du code vous avez cette ligne c'est ici que vous mettez le lien de votre image

Code:

 $.backstretch("https://i.goopics.net/yowqV.png");
 

Pour un fond qui change vous pouvez mettre ce code

Code:

/*! Backstretch - v2.0.4 - 2013-06-19
* http://srobbin.com/jquery-plugins/backstretch/
* Copyright (c) 2013 Scott Robbin; Licensed MIT */


$(document).ready(function() {
  (function(a, d, p) {
    a.fn.backstretch = function(c, b) {
      (c === p || 0 === c.length) && a.error("No images were supplied for Backstretch");
      0 === a(d).scrollTop() && d.scrollTo(0, 0);
      return this.each(function() {
        var d = a(this), g = d.data("backstretch");
        if (g) {
          if ("string" == typeof c && "function" == typeof g[c]) {
            g[c](b);
            return;
          }
          b = a.extend(g.options, b);
          g.destroy(!0);
        }
        g = new q(this, c, b);
        d.data("backstretch", g);
      });
    };
    a.backstretch = function(c, b) {
      return a("body").backstretch(c, b).data("backstretch");
    };
    a.expr[":"].backstretch = function(c) {
      return a(c).data("backstretch") !== p;
    };
    a.fn.backstretch.defaults = {centeredX:!0, centeredY:!0, duration:5E3, fade:0};
    var r = {left:0, top:0, overflow:"hidden", margin:0, padding:0, height:"100%", width:"100%", zIndex:-999999}, s = {position:"absolute", display:"none", margin:0, padding:0, border:"none", width:"auto", height:"auto", maxHeight:"none", maxWidth:"none", zIndex:-999999}, q = function(c, b, e) {
      this.options = a.extend({}, a.fn.backstretch.defaults, e || {});
      this.images = a.isArray(b) ? b : [b];
      a.each(this.images, function() {
        a("<img />")[0].src = this;
      });
      this.isBody = c === document.body;
      this.$container = a(c);
      this.$root = this.isBody ? l ? a(d) : a(document) : this.$container;
      c = this.$container.children(".backstretch").first();
      this.$wrap = c.length ? c : a('<div class="backstretch"></div>').css(r).appendTo(this.$container);
      this.isBody || (c = this.$container.css("position"), b = this.$container.css("zIndex"), this.$container.css({position:"static" === c ? "relative" : c, zIndex:"auto" === b ? 0 : b, background:"none"}), this.$wrap.css({zIndex:-999998}));
      this.$wrap.css({position:this.isBody && l ? "fixed" : "absolute"});
      this.index = 0;
      this.show(this.index);
      a(d).on("resize.backstretch", a.proxy(this.resize, this)).on("orientationchange.backstretch", a.proxy(function() {
        this.isBody && 0 === d.pageYOffset && (d.scrollTo(0, 1), this.resize());
      }, this));
    };
    q.prototype = {resize:function() {
      try {
        var a = {left:0, top:0}, b = this.isBody ? this.$root.width() : this.$root.innerWidth(), e = b, g = this.isBody ? d.innerHeight ? d.innerHeight : this.$root.height() : this.$root.innerHeight(), j = e / this.$img.data("ratio"), f;
        j >= g ? (f = (j - g) / 2, this.options.centeredY && (a.top = "-" + f + "px")) : (j = g, e = j * this.$img.data("ratio"), f = (e - b) / 2, this.options.centeredX && (a.left = "-" + f + "px"));
        this.$wrap.css({width:b, height:g}).find("img:not(.deleteable)").css({width:e, height:j}).css(a);
      } catch (h$0) {
      }
      return this;
    }, show:function(c) {
      if (!(Math.abs(c) > this.images.length - 1)) {
        var b = this, e = b.$wrap.find("img").addClass("deleteable"), d = {relatedTarget:b.$container[0]};
        b.$container.trigger(a.Event("backstretch.before", d), [b, c]);
        this.index = c;
        clearInterval(b.interval);
        b.$img = a("<img />").css(s).bind("load", function(f) {
          var h = this.width || a(f.target).width();
          f = this.height || a(f.target).height();
          a(this).data("ratio", h / f);
          a(this).fadeIn(b.options.speed || b.options.fade, function() {
            e.remove();
            b.paused || b.cycle();
            a(["after", "show"]).each(function() {
              b.$container.trigger(a.Event("backstretch." + this, d), [b, c]);
            });
          });
          b.resize();
        }).appendTo(b.$wrap);
        b.$img.attr("src", b.images[c]);
        return b;
      }
    }, next:function() {
      return this.show(this.index < this.images.length - 1 ? this.index + 1 : 0);
    }, prev:function() {
      return this.show(0 === this.index ? this.images.length - 1 : this.index - 1);
    }, pause:function() {
      this.paused = !0;
      return this;
    }, resume:function() {
      this.paused = !1;
      this.next();
      return this;
    }, cycle:function() {
      1 < this.images.length && (clearInterval(this.interval), this.interval = setInterval(a.proxy(function() {
        this.paused || this.next();
      }, this), this.options.duration));
      return this;
    }, destroy:function(c) {
      a(d).off("resize.backstretch orientationchange.backstretch");
      clearInterval(this.interval);
      c || this.$wrap.remove();
      this.$container.removeData("backstretch");
    }};
    var l, f = navigator.userAgent, m = navigator.platform, e = f.match(/AppleWebKit\/([0-9]+)/), e = !!e && e[1], h = f.match(/Fennec\/([0-9]+)/), h = !!h && h[1], n = f.match(/Opera Mobi\/([0-9]+)/), t = !!n && n[1], k = f.match(/MSIE ([0-9]+)/), k = !!k && k[1];
    l = !((-1 < m.indexOf("iPhone") || -1 < m.indexOf("iPad") || -1 < m.indexOf("iPod")) && e && 534 > e || d.operamini && "[object OperaMini]" === {}.toString.call(d.operamini) || n && 7458 > t || -1 < f.indexOf("Android") && e && 533 > e || h && 6 > h || "palmGetResource" in d && e && 534 > e || -1 < f.indexOf("MeeGo") && -1 < f.indexOf("NokiaBrowser/8.5.0") || k && 6 >= k);
  })(jQuery, window);

 
    $.backstretch([
      "https://i.goopics.net/yowqV.png"
    , "https://i62.servimg.com/u/f62/12/69/24/33/thumb-10.jpg"
    , "https://i62.servimg.com/u/f62/12/69/24/33/under-10.jpg"
  ], {duration: 10000, fade: 750});
 
 
 
});

Pour changer les images et d'autres réglages à la fin du code vous avez ces lignes

Code:

 $.backstretch([
      "https://i.goopics.net/yowqV.png"
    , "https://i62.servimg.com/u/f62/12/69/24/33/thumb-10.jpg"
    , "https://i62.servimg.com/u/f62/12/69/24/33/under-10.jpg"
  ], {duration: 10000, fade: 750});
 

Avec les liens vers 3 images différentes.
Vous pouvez changez la valeur 10000 pour le temps avant le changement d'image dans cette ligne

Code:

duration: 10000

et changer également la durée de l'effet " fading" en changeant la valeur 750

Code:

fade: 750

cdt.

[IriXa]

Bonjour Adam_sfp,

C'est très gentil à vous, j'ai trés bien compris vos explications. Les fonds qui changent j'aime bien aussi, mais le souci reste le même. Le fond se répète et ne donne pas un beau rendu sur l'ordinateur et sur la tablette c'est pire qu'avant.

J'ai essayer touts les scripts de cette page, mais rien ne fonctionne.

Merci si vous pouvez m'aider davantage.

[Faline]

Bonjour, le problème est-il une répétition dans le temps ou dans l'espace ? J'avais compris que c'étaient les jointures qui gênaient, donc soit étirer sur toute la page ou transformer la tuile en tuile sans jointure, qui pourra se répéter sans laisser de marques.

[Adam_sfp]

Bonjour

Si vous avez du css concernant l'image de fond il faut l'enlever.
Idem si vous avez mis une image de fond dans gestion des images.
Il y a juste besoin de mettre le script laisser le en place si ça ne fonctionne pas c'est plus facile de trouver l'erreur ;-)

Vous pouvez voir l'effet sur ce forum de test

Cdt.

[IriXa]

Bonsoir,

J'ai replacé le script, j'ai enlevé le fond dans la gestion des images sur le forum. Dans le css je n'ai rien qui concerne l'image de fond. Sur la tablette, voici ce que cela donne. Une capture qu'un utilisateur du forum m'a envoyé.

[Adam_sfp]

Bonsoir

On va commencer dans l'ordre
De votre coté par rapport à avant cela change quelque chose?

Sur la tablette, voici ce que cela donne.

C'est vous qui avez pris un screen ou un utilisateur sur tablette?
Car pour moi quand je vais sur votre forum je vois bien que cela fonctionne par rapport à avant.

[IriXa]

Oui, sur le forum avec ordinateur cela fonctionne, mais si on se connecte avec une tablette, l'image de fond apparaît comme sur la capture d'écran que j'ai placé au dessus à 17H03
Je viens de tester, avec ma tablette samsung et c'est bien ce que je vois, c'est à dire l'image de fond avec un décalé vers la gauche et un espace de la couleur du forum à droite.

[Adam_sfp]

Bonsoir

Le javascript est activé sur le navigateur de votre tablette?

Mettez aussi une image plus grande pour voir...
https://i.servimg.com/u/f62/12/69/24/33/back10.jpg

[IriXa]

Je viens de placer cette image https://i.servimg.com/u/f62/12/69/24/33/back10.jpg - mais cela ne change pas avec la connexion sur tablette. Les Js sont compatibles puisque, pour d'autres Js scripts que j'ai placé sur le forum il n'y a aucun souci.

[Adam_sfp]

Bonsoir

On va déjà bien s"assurer que le javascript fonctionne sur votre tablette
Quand vous allez sur ce forum de test
http://testfa.forumactif.com/

Vous avez la neige ? la musique et le chat bouge?
Si oui enlevez le javascript et essayez ceci dans votre css

Code:

body{
  margin:0;
  padding:0;
  background: url(https://i62.servimg.com/u/f62/11/62/08/54/backla10.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}


Si non le javascript n'est pas activé sur votre tablette.

[IriXa]

Bonjour

Vous avez la neige ? la musique et le chat bouge?

Oui le Js est bien activé sur la tablette il y a la neige, la musique et le petit chat.

Si oui enlevez le javascript et essayez ceci dans votre css

J'ai enlevé et remplacé le Js, du coup il n'y a plus d'image de fond, ni avec connexion ordi, ni avec connexion tablette.

[Adam_sfp]

Bonjour @IriXa

Il faut essayer avec ce code dans le CSS pas dans le javascript.

Code:

body{
  margin:0;
  padding:0;
  background: url(https://i62.servimg.com/u/f62/11/62/08/54/backla10.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}

cdt

[IriXa]

Bonjour Adam_sfp

Ah ok j'avais pas compris je fais de suite ...

[IriXa]

J'ai placé le script dans le css et il ne se passe rien. Toujours aucune image ( tablette et ordi ).

[Adam_sfp]

Bonjour

Il ne faut pas mettre le script dans le CSS

Vous avez toujours le script en place dans gestion des codes javascript enlevez le.. ( ou décochez les cases et sauvegardez il ne sera pas actif )
Et vous avez mal mis le css

Code:

/*Fin --- */

Image de Fond du forum

body{
  margin:0;
  padding:0;
  background: url(https://i.servimg.com/u/f62/11/62/08/54/backla10.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}


le

Code:


Image de Fond du forum

va empêchez votre css de fonctionner...
le mettre comme ceci

Code:

/*Image de Fond du forum*/ 

on va y arriver

[IriXa]

Sur la tablette j'ai maintenant un fond tout blanc
Par contre sur l'ordi l'image de fond est revenue.
J'ai même essayé avec une autre tablette c'est pareille.

[Adam_sfp]

Bonjour

J'ai pas de tablette pour tester ;-)
Avec ce code logiquement ça devrait fonctionner
Remplacez le CSS par celui ci

Code:

body{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;

  background: url(https://i62.servimg.com/u/f62/11/62/08/54/backla10.jpg);
 
}

[IriXa]

Sur la tablette c'est parfait, mais avec ordinateur l'image se répète trois fois en enfilade et le fond n'est pas fixe comme je le souhaitais.

(Je vous aurais bien prêté ma tablette mais 12000 km c'est légèrement un peu trop éloigné.)

Du coup je ne sais pas trop quoi faire avec cette image de fond

[Adam_sfp]

Bonsoir

Remplacez par celui ci

Code:

body{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: url(https://i62.servimg.com/u/f62/11/62/08/54/backla10.jpg) no-repeat center;
 
}

Cdt.

[IriXa]

Bonjour Adam_sfp

Ce script bloque le forum et on a plus accès au curseur sur l'ordinateur. J'ai dû l'enlever et ne rien placer pour le moment afin de ne pas pénaliser les utilisateurs.

IriXa.

[Adam_sfp]

Bonjour IriXa

12000 km ?! hum l’île de la réunion ?

Bon je crois qu'on aura essayé toutes les solutions disponibles bientôt ;-)
On ne met pas de script et on met ceci dans le CSS

Code:

body {
         background: url(https://i62.servimg.com/u/f62/11/62/08/54/backla10.jpg) no-repeat center center fixed;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
                        overflow-x: hidden;
 
      }

Si ça ne fonctionne pas la on essayera avec une taille d'image en fonction de la résolution...

Cdt.

[IriXa]

( Oui, 12000 km, Île de la réunion, c'est dire comme vous avez le bras long sur ce forum )

Mais le code ne fonctionne toujours pas sur la tablette, il n'y a aucune image. Par contre sur l'ordinateur l'image est présente.

[Adam_sfp]

Bon allez jeter la tablette dans la ravine de la souris chaude

On essaie celui ci dans le css?

Code:

body{
  margin:0;
  padding:0;
  background: url(https://i62.servimg.com/u/f62/11/62/08/54/backla10.jpg) no-repeat top fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Si ça ne fonctionne pas la on essayera une dernière tentative avec @media screen et des images en fonction de la taille ..

[IriXa]

( il n'y a même plus de ravine à la souris chaude )

Le code en fonctionne toujours pas sur la tablette.

[Adam_sfp]

Bonjour

Bon on essaie celui ci ?
On va finir par y arriver sinon je viens creuser la ravine

A mettre dans le CSS

Code:

body {
    background-image: url(https://i62.servimg.com/u/f62/11/62/08/54/backla10.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
/* Mobile */

@media only screen and (max-width: 780px) {
    body {
        background-image: url(https://i62.servimg.com/u/f62/19/77/96/54/mobile10.jpg);
    }
}

Cdt.

[IriXa]

( Il vous faudra un grande pelle, il y a des cailloux partout depuis le cyclone )

Ca fonctionne !!!!

L'image de fond est sur la tablette et sur l'ordinateur.

IriXa.