Fond du forum qui ne s'adapte pas

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Fond du forum qui ne s'adapte pas

Message par -Nathouille- le Sam 9 Aoû 2014 - 11:26

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 :
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

-Nathouille-
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 19/01/2013

http://nouvel-horizon.forumsactifs.com/
-Nathouille- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par MasDan le Dim 10 Aoû 2014 - 2:17

Bonjour,

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.

MasDan
*****

Masculin
Messages : 855
Inscrit(e) le : 24/05/2011

http://projetaum2.forumactif.com/
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par -Nathouille- le Dim 10 Aoû 2014 - 11:36

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.

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à.

-Nathouille-
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 19/01/2013

http://nouvel-horizon.forumsactifs.com/
-Nathouille- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par [Nihil] le Dim 10 Aoû 2014 - 11:59

Bonjour,

Une solution pourrait être de reprendre le code proposé par MasDan mais de mettre "cover" au lieu de "contain" Wink (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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par -Nathouille- le Dim 10 Aoû 2014 - 12:11

Bonjour,

Toujours aucune modification avec la deuxième option. J'avoue ne pas du tout comprendre pourquoi ça ne fonctionne pas...

-Nathouille-
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 19/01/2013

http://nouvel-horizon.forumsactifs.com/
-Nathouille- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par [Nihil] le Dim 10 Aoû 2014 - 14:50

Désolée, je me suis trompée dans mon code CSS, celui ci devrait déjà être un peu mieux Smile

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par -Nathouille- le Dim 10 Aoû 2014 - 14:54

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).

-Nathouille-
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 19/01/2013

http://nouvel-horizon.forumsactifs.com/
-Nathouille- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par [Nihil] le Dim 10 Aoû 2014 - 14:57

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

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par -Nathouille- le Dim 10 Aoû 2014 - 14:59

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 ^^'

-Nathouille-
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 19/01/2013

http://nouvel-horizon.forumsactifs.com/
-Nathouille- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par [Nihil] le Dim 10 Aoû 2014 - 15:35

Hum, pourrais tu détailler davantage ce que tu attends exactement ? (éventuellement avec un schéma)

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par -Nathouille- le Dim 10 Aoû 2014 - 17:40

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 ^^'

-Nathouille-
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 19/01/2013

http://nouvel-horizon.forumsactifs.com/
-Nathouille- a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par dante le Dim 10 Aoû 2014 - 20:46

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:

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 */
}

dante
**

Masculin
Messages : 72
Inscrit(e) le : 22/07/2004

http://terrae.forumpro.fr/
dante a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Fond du forum qui ne s'adapte pas

Message par -Nathouille- le Dim 10 Aoû 2014 - 21:02

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 =)

-Nathouille-
Nouveau membre

Féminin
Messages : 18
Inscrit(e) le : 19/01/2013

http://nouvel-horizon.forumsactifs.com/
-Nathouille- a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum