Image de fond de forum adaptée aux écrans 4:3

[Elwing]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : toujours
Lien du forum : http://ewilan.forumactif.fr/

Description du problème

Bonjour, et merci d'avance à la bonne âme archiviste qui pourra m'aider.

Je dis "archiviste", parce que je crois que le code pouvant régler mon problème date de l'an pimpin...
Actuellement j'utilise le code cité ici : https://forum.forumactif.com/t286701-image-de-fond-qui-s-adapte-a-la-resolution-du-visiteur#2531683

Et les solutions proposées dans les autres sujets trouvés me paraissent un peu trop "lourdes", j'ai peur qu'une solution trop compliquée ralentisse le chargement des pages...

CSS de body actuel :

Code:

/*BODY FORUM*/

      body {
          background-image:url(http://img11.nnm.me/3/7/6/d/d/221b87a8b57c1f38b235325c43f.jpg);
          background-size: 100% auto;
  background-attachment: fixed;
  margin-top: 30px;
        }

MAIS ! l'image étant dans un format "16:9", elle ne peut remplir un écran "4:3" même avec beaucoup de volonté et un remplissage 100%, comme le montre la capture d'écran.

Il y a un moment, dans mes tout premiers forums RP, où j'utilisais un code CSS nécessitant plusieurs dimension d'images (trois je crois). C'était alors la plus proche de la résolution du visiteur qui s'appliquait et prenait toute la place.

Aujourd'hui, j'aimerais retrouver ce code, qui était juste du CSS si mes souvenirs sont bons. J'ai déjà redimensionné l'image de fond pour qu'elle puisse s'adapter à un écran carré, mais je ne sais pas comment faire comprendre au fow' qu'il doit prendre cette image lorsqu'on utilise un écran 4:3.

Je pense avoir fait le tour, n'hésitez pas si vous avez besoin de plus d'infos

Encore merci d'avance au conservateur se souvenant de ce code !!

[MlleAlys]

Bonjour,
essayez en modifiant votre code css ainsi :

Code:

/*BODY FORUM*/
 
body {
    background-image:url(http://img11.nnm.me/3/7/6/d/d/221b87a8b57c1f38b235325c43f.jpg);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    margin-top: 30px;
}

La valeur "cover" devrait faire en sorte que l'image prenne la taille minimale pour couvrir l'écran en largeur ET en hauteur, sans déformation.

[Elwing]

C'est parfait, merci !
Je ne connaissais pas la fonction cover pour le background, mais d'après la personne avec un écran carré, ça fonctionne très bien ! =)

Encore merci !
J'édite en "résolu"...