Fond de page qui n'est pas adapté a mon forum

[Cedlaffreux]

Bonjour,

Je n'arrive pas après divers tentative est multiples code CSS aussi par le biais du PA / Gestion des image a avoir un résultat satisfaisant voir ne fonctionnant pas, sois l'image et dupliqué sois elle et fixe est trop agrandi je voudrais cette image en fond de site et qui monte a fleur de ma bannière voir lien du fond de page souhaité :  https://wallup.net/wp-content/uploads/2017/03/28/318406-sea-water-waves.jpg

j'ai Actuellement essayé cette méthode par le biais d'un code Javascript et le rendu me plait bien mais le soucis c'est que je n'arrive pas a le pofiner pour que l'image sois retailler correctement pour arriver a fleur jusqu'à ma bannière et sur un téléphone portable c'est encore pire l'écart et vachement plus important merci par avance du coup de main que vous allez pouvoir m'apporter.

image ou le fond dois arriver : https://i.servimg.com/u/f16/20/54/44/99/image_11.png


code java script actuel :

Code:

$(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://wallpaperaccess.com/full/2312000.jpg");
 
      
 
});

Mon site : https://www-aqua-passion-fr.forumactif.com/
Sous : ModernBB
ADMIN oui

Grand merci d'avance.

[MlleAlys]

Bonjour,
Plutôt que ce javascript, je vous propose de tester ceci :
- retirez ou désactivez ce javascript
- dans affichage > images (avancé) : mettez votre image en image du fond de page.
- cochez "Fond de page fixe"
- enregistrez
- dans couleur & css, ajoutez le code css suivant :

Code:

html, body {
  background-size:cover;
}

- enregistrez et actualisez votre forum.

[Cedlaffreux]

Merci pour votre réponse  j'ai fait ce que m'avez demandé je vous laisse voir le résultat c'est presque sa :
https://www-aqua-passion-fr.forumactif.com/

il et dupliquée en deux et limage de base a des coquillage qui ce trouve en bas on ne les vois pas il se retrouve duppliqué en haut.
comme ceci : https://wallpaperaccess.com/full/2312000.jpg  Lien copié et coller a partir d'internet directement / Taille de l'image 927*521 si sa peux vous aider. 

Un très grand merci du coup de main 

[Cedlaffreux]

Ah sa semble bon regarder quand même j'ai changé pour une autres image de taille beaucoup plus grande 
taille de l'image 1920 × 1200 ah ben non sur le téléphone c'est flagrant l'image et en doublon

[Cedlaffreux]

Je vien de modifier votre code comme ceci et la l'image n'est plus du tout dupliqué m'es par contre elle et zoomé que puis je inséré pour qu'elle sois dézoomer je vous remercie.

code CSS

Code:

html, body {
  background-repeat: no-repeat !important;
}

sur le téléphone l'image et parfaite par contre sur pc sur plusieurs navigateur ou j'ai pu faire le test Edge, Firefox, Opéra l'image et vachement zoomer.

[MlleAlys]

C'est le "background-size:cover;" qui est sensé régler la taille de l'image et rendre inutiles les no-repeat.
Pouvez-vous copier/coller l'intégralité de votre css actuel ? Il semble qu'il y ait des erreurs, et que c'est pour ça que certains codes ne sont pas pris en compte. En les corrigeant, cela devrait résoudre le problème.

[Chacha]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est archivé afin de ne pas perdre les réponses apportées.