Fond du forum qui ne s'adapte pas
4 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Fond du forum qui ne s'adapte pas
Bonjour !
Je voudrais mettre un fond qui s'adapte à toutes les résolutions sur mon forum. Après pas mal de tests (dont le code proposé sur ce forum-ci), je suis tombée sur un code qui allait fonctionner pour moi mais... J'ai l'impression qu'il est incomplet vu que rien ne change. A chaque fois, je n'ai pas l'image entière pour le fond, mais que la moitié voire moins (autrement dit, ce que me laisse voir ma résolution d'écran). Ma soeur, qui a un ordi' récent, a la même chose que moi donc ça ne vient pas de mon ordi' mais du code...
Ce que j'ai mis dans les codes javascript :
Et dans le CSS :
Je suis la fonda et mon forum est en phBB2. J'ai essayé sur Chrome, Firefox... Même chose. J'avoue commencer à désespérer, là...
Merci à la personne qui prendra le temps de me répondre ^^
Je voudrais mettre un fond qui s'adapte à toutes les résolutions sur mon forum. Après pas mal de tests (dont le code proposé sur ce forum-ci), je suis tombée sur un code qui allait fonctionner pour moi mais... J'ai l'impression qu'il est incomplet vu que rien ne change. A chaque fois, je n'ai pas l'image entière pour le fond, mais que la moitié voire moins (autrement dit, ce que me laisse voir ma résolution d'écran). Ma soeur, qui a un ordi' récent, a la même chose que moi donc ça ne vient pas de mon ordi' mais du code...
Ce que j'ai mis dans les codes javascript :
- Code:
$(function(){
var bg= "http://img4.hostingpics.net/pics/252831Fondplusque1600.jpg";
if(screen.width < 801) bg="http://img4.hostingpics.net/pics/594551Fond800x600.jpg";
else if(screen.width < 1025) bg="http://img4.hostingpics.net/pics/292593Fond1024x768.jpg";
else if(screen.width < 1281) bg="http://img4.hostingpics.net/pics/168285Fond1280x960.jpg";
else if(screen.width < 1601) bg="http://img4.hostingpics.net/pics/471457Fond1600x1200.jpg";
document.body.style.backgroundImage="url(""+bg+"")";
});
Et dans le CSS :
- Code:
/*Fond du forum*/
body{
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Je suis la fonda et mon forum est en phBB2. J'ai essayé sur Chrome, Firefox... Même chose. J'avoue commencer à désespérer, là...
Merci à la personne qui prendra le temps de me répondre ^^
Dernière édition par -Nathouille- le Dim 10 Aoû 2014 - 21:02, édité 2 fois
Re: Fond du forum qui ne s'adapte pas
Bonjour,
Pour que l'image de fond s'ajuste automatique, remplacer à votre CSS ceci
par cela (ajout de la ligne background-size)
Contrainte : L'image s'ajuste lorsque la résolution de l'image en est supérieur à la résolution de l'écran mais pas le contraire.
Pour que l'image de fond s'ajuste automatique, remplacer à votre CSS ceci
- Code:
/*Fond du forum*/
body{
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
}
par cela (ajout de la ligne background-size)
- Code:
/*Fond du forum*/
body{
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: contain;
}
Contrainte : L'image s'ajuste lorsque la résolution de l'image en est supérieur à la résolution de l'écran mais pas le contraire.
Re: Fond du forum qui ne s'adapte pas
Re,
Ca ne fonctionne pas... L'image était extrêmement petite et ne dépassait pas la bannière. J'ai essayé un truc, de mon côté, dans les codes javascripts (je ne sais pas ce qui m'a pris de coller ça, je me suis trompée ><), j'ai rajouté deux résolutions d'écran mais ça ne change rien.
Mais ça ne change rien...
Edit : Je viens d'intervertir le dernier fond (1600x1200) avec le tout premier "var" (plusque1600) et il y a du changement. En fait, j'ai l'impression que le code ne prend en compte que la première image... Comme si les autres n'étaient pas là.
Ca ne fonctionne pas... L'image était extrêmement petite et ne dépassait pas la bannière. J'ai essayé un truc, de mon côté, dans les codes javascripts (je ne sais pas ce qui m'a pris de coller ça, je me suis trompée ><), j'ai rajouté deux résolutions d'écran mais ça ne change rien.
- Code:
$(function(){
var bg= "http://img4.hostingpics.net/pics/252831Fondplusque1600.jpg";
if(screen.width < 801) bg="http://img4.hostingpics.net/pics/594551Fond800x600.jpg";
else if(screen.width < 1025) bg="http://img4.hostingpics.net/pics/292593Fond1024x768.jpg";
else if(screen.width < 1281) bg="http://img4.hostingpics.net/pics/168285Fond1280x960.jpg";
else if(screen.width < 1367) bg="http://img4.hostingpics.net/pics/254088Fond1366x768.jpg";
else if(screen.width < 1441) bg="http://img4.hostingpics.net/pics/914699Fond1440x900.jpg";
else if(screen.width < 1601) bg="http://img4.hostingpics.net/pics/471457Fond1600x1200.jpg";
document.body.style.backgroundImage="url(""+bg+"")";
});
Mais ça ne change rien...
Edit : Je viens d'intervertir le dernier fond (1600x1200) avec le tout premier "var" (plusque1600) et il y a du changement. En fait, j'ai l'impression que le code ne prend en compte que la première image... Comme si les autres n'étaient pas là.
Re: Fond du forum qui ne s'adapte pas
Bonjour,
Une solution pourrait être de reprendre le code proposé par MasDan mais de mettre "cover" au lieu de "contain" (il faut du coup rajouter dans le CSS le background-image et retirer le JS correspondant).
Une autre idée pourrait être de mettre ceci dans le CSS (en enlevant le JS que vous aviez ajouté) :
Une solution pourrait être de reprendre le code proposé par MasDan mais de mettre "cover" au lieu de "contain" (il faut du coup rajouter dans le CSS le background-image et retirer le JS correspondant).
Une autre idée pourrait être de mettre ceci dans le CSS (en enlevant le JS que vous aviez ajouté) :
- Code:
body {
background-image: url('http://img4.hostingpics.net/pics/252831Fondplusque1600.jpg');
}
@media screen and (max-width: 801px) {
body { backgroud-image: url('http://img4.hostingpics.net/pics/594551Fond800x600.jpg'); }
}
@media screen and (max-width: 1025px) {
body { backgroud-image: url('http://img4.hostingpics.net/pics/292593Fond1024x768.jpg'); }
}
@media screen and (max-width: 1281px) {
body { backgroud-image: url('http://img4.hostingpics.net/pics/168285Fond1280x960.jpg'); }
}
@media screen and (max-width: 1601px) {
body { backgroud-image: url('http://img4.hostingpics.net/pics/471457Fond1600x1200.jpg'); }
}
Dernière édition par [Nihil] le Dim 10 Aoû 2014 - 12:16, édité 1 fois
Re: Fond du forum qui ne s'adapte pas
Bonjour,
Toujours aucune modification avec la deuxième option. J'avoue ne pas du tout comprendre pourquoi ça ne fonctionne pas...
Toujours aucune modification avec la deuxième option. J'avoue ne pas du tout comprendre pourquoi ça ne fonctionne pas...
Re: Fond du forum qui ne s'adapte pas
Désolée, je me suis trompée dans mon code CSS, celui ci devrait déjà être un peu mieux
- Code:
body {
background-image: url('http://img4.hostingpics.net/pics/252831Fondplusque1600.jpg');
}
@media screen and (min-width: 1282px) and (max-width: 1601px) {
body { background-image: url('http://img4.hostingpics.net/pics/471457Fond1600x1200.jpg'); }
}
@media screen and (min-width: 1026px) and (max-width: 1281px) {
body { background-image: url('http://img4.hostingpics.net/pics/168285Fond1280x960.jpg'); }
}
@media screen and (min-width: 802px) and (max-width: 1025px) {
body { background-image: url('http://img4.hostingpics.net/pics/292593Fond1024x768.jpg'); }
}
@media screen and (max-width: 801px) {
body { background-image: url('http://img4.hostingpics.net/pics/594551Fond800x600.jpg'); }
}
Dernière édition par [Nihil] le Dim 10 Aoû 2014 - 14:56, édité 1 fois
Re: Fond du forum qui ne s'adapte pas
Corrigé, et c'est rien, c'est toujours mieux que moi qui ne comprends rien ^^'
Par contre, ça fait toujours la même chose... Comme si le code imposait la première image (trop grande).
Par contre, ça fait toujours la même chose... Comme si le code imposait la première image (trop grande).
Re: Fond du forum qui ne s'adapte pas
Essaye en remplaçant les background-image par des images vraiment différentes (une image blanche, une image rouge, etc).
En effet chez moi le code fonctionne O0
En effet chez moi le code fonctionne O0
Re: Fond du forum qui ne s'adapte pas
Bah, en fait, le code fonctionne parce que je vois les arbres un peu plus gros sur mon écran qu'avant ou je voyais majoritairement le ciel sans les arbres. Donc l'image change, oui, mais ça ne s'adapte pas à ma résolution ^^'
Re: Fond du forum qui ne s'adapte pas
Hum, pourrais tu détailler davantage ce que tu attends exactement ? (éventuellement avec un schéma)
Re: Fond du forum qui ne s'adapte pas
Eh bien... Juste que l'image soit entière pour toutes les résolutions. Que sur un ordi', on ne voit pas seulement les arbres tandis que sur un autre, on voit le chemin aussi ^^'
Re: Fond du forum qui ne s'adapte pas
J'uotilisais aussi ce genre de code pour adapter mon fond à plusieurs résolutions d'écrans...
Le seul problème c'est qu'il faut t'embêter à créer une image par résolution
Et trouver toutes les résolutions utilisées par tes membres pour tous les combler (Et il n'y en a pas qu'un peu)
Personnellement je te conseil d'utiliser ce code (à mettre dans ton CSS) qui agrandit le fond en fonction de la taille de la fenêtre:
Le seul problème c'est qu'il faut t'embêter à créer une image par résolution
Et trouver toutes les résolutions utilisées par tes membres pour tous les combler (Et il n'y en a pas qu'un peu)
Personnellement je te conseil d'utiliser ce code (à mettre dans ton CSS) qui agrandit le fond en fonction de la taille de la fenêtre:
- Code:
body{
margin:0;
padding:0;
background: url(url-du-background.jpg) no-repeat top fixed;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* pour Opera */
background-size: cover; /* version standardisée */
}
Re: Fond du forum qui ne s'adapte pas
Ca a marché ! Merci beaucoup, je pense que je vais garder ce code. En tout cas, j'ai changé la taille de l'image et ça va sur mon ordi'. Je verrai, à l'occasion, ce que ça donne sur d'autres ordis avec d'autres résolutions ^^
Merci =)
Merci =)
Sujets similaires
» Je n'arrive pas changer la couleur fond de page et fond de cadre du forum. Jr
» 2 Problèmes : mes boutons "forum" "faq" ect sont trop à gauche, et on ne voit pas assez mon fond de forum :
» fond de forum
» le fond du mon forum
» fond du forum en css
» 2 Problèmes : mes boutons "forum" "faq" ect sont trop à gauche, et on ne voit pas assez mon fond de forum :
» fond de forum
» le fond du mon forum
» fond du forum en css
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum