Fond de page qui n'est pas adapté a mon forum
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Fond de page qui n'est pas adapté a mon forum
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 :
Mon site : https://www-aqua-passion-fr.forumactif.com/
Sous : ModernBB
ADMIN oui
Grand merci d'avance.
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.
Dernière édition par Cedlaffreux le Mar 23 Jan 2024 - 14:42, édité 2 fois (Raison : Modification lien de l'image)
Re: Fond de page qui n'est pas adapté a mon forum
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 :
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;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Fond de page qui n'est pas adapté a mon forum
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
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
Re: Fond de page qui n'est pas adapté a mon forum
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
taille de l'image 1920 × 1200 ah ben non sur le téléphone c'est flagrant l'image et en doublon
Re: Fond de page qui n'est pas adapté a mon forum
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
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.
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.
Dernière édition par Cedlaffreux le Mar 23 Jan 2024 - 14:05, édité 1 fois (Raison : rajout d'élément)
Re: Fond de page qui n'est pas adapté a mon forum
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.
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.
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Fond de page qui n'est pas adapté a mon forum
Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : 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 » |
Re: Fond de page qui n'est pas adapté a mon forum
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. |
Sujets similaires
» Fond de page ne s'adapte pas à la résoution (body)
» Un fond de forum qui s'adapte ?
» Fond du forum qui ne s'adapte pas
» Fond de forum qui s'adapte aux diverses résolutions
» Comment faire pour que le fond du forum s'adapte à la taille de l'écran?
» Un fond de forum qui s'adapte ?
» Fond du forum qui ne s'adapte pas
» Fond de forum qui s'adapte aux diverses résolutions
» Comment faire pour que le fond du forum s'adapte à la taille de l'écran?
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum