Fond du forum qui ne s'adapte pas

[-Nathouille-]

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

[MasDan]

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.

[-Nathouille-]

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

[[Nihil]]

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

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'); }
}

[-Nathouille-]

Bonjour,

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

[[Nihil]]

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'); }
}

[-Nathouille-]

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

[[Nihil]]

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

[-Nathouille-]

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

[[Nihil]]

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

[-Nathouille-]

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

[dante]

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

[-Nathouille-]

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