Image de fond

[JLoup13]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Depuis la création du forum, je n'arrive pas à mettre l'image sans répétition pour qu'elle n'apparaisse qu'une fois.
Lien du forum : https://cavalcade-kirin-tor.forumactif.com

Description du problème

Bonjour,

Depuis la création du forum, je n'arrive pas à mettre l'image sans répétition pour qu'elle n'apparaisse qu'une fois et qu'elle s'adapte à la résolution de l'écran.

Merci pour votre aide.

JLoup13

[*Splash*]

Hi JLoup13,

Essaie ce code, à mettre dans la feuille CSS :

Code:

body {
  background-image:url(URL de votre image);
  background-size: 100% auto;
}

[JLoup13]

Bonjour,

Merci pour ta réponse.

Malheureusement, je viens de tester et cela ne fonctionne pas.

Pour être sur que je ne fais pas n'importe quoi, je te joins une image de ce l'endroit ou j'ai ajouté le code CSS que tu m'as donné : CSS

Merci à toi !

[*Splash*]

Plutôt étrange l'url de ton image, il manque l'extension de fichier

[JLoup13]

Exact ... J'ai donc repris le bon lien mais même en changeant le lien cela ne fonctionne pas.

L'image : Test CSS

Je l'ai pas précisé mais à la base le thème, je l'ai trouvé sur Hitskin, je ne sais pas si cela change quelque chose.

[*Splash*]

Dans ton code, l'url de l'image est : https://i.servimg.com/u/f87/19/93/07/37/test10.jpg

[JLoup13]

*Facepalm* . . . Je te modifie ca

[JLoup13]

C'est toujours pareil avec la bonne image !

Test CSS

[*Splash*]

Ce code :

Code:

body {
  background-image: url("https://https://i.servimg.com/u/f87/19/93/07/37/darkmo10.jpg");     
  background-attachment: fixed !important;   
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: top;
  position: absolute;
  width:100%;
}

[JLoup13]

Re,

C'est toujours pareil.

Je te met le css qui se trouve sur ma page, peut-être que ca pourra t'aider !

Code:

/***ARRONDIR LES CADRES ENVOYER ETC.***/

body {
  
  background-image: url("https://https://i.servimg.com/u/f87/19/93/07/37/darkmo10.jpg");    
  background-attachment: fixed !important;  
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: top;
  position: absolute;
  width:100%;
}


nput.post{
        
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        
        }
        
#wrap {
        border-left: 10px solid #f0f0f0; border-bottom:5px solid
        #f0f0f0;-moz-border-radius-bottomleft: 10px;
        -webkit-border-bottom-left-radius: 10px; border-bottom-left-radius:
        10px;border-right: 10px solid #f0f0f0;border-top: 10px ridge #f0f0f0;
        }

        .post{
        
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        
        }

#submenu {
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        }

div.maintitle {
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        }




.forabg{
        -moz-border-radius:12px;
        -webkit-border-radius:12px;
        border-radius:12px;
        }

.bodyline{
          -moz-border-radius:30px;
        -webkit-border-radius:30px;
        border-radius:30px;
        }
  

.mainoption
{
-moz-border-radius:10px; /**** Border-radius signifie "rayon de la bordure", 10px le rayon de l'arrondissement *****/
-webkit-border-radius:10px; /*** webkit signifie "kit web", 10px le rayon de l'arrondissement ****/
 border-radius:10px; /*** pour linux ***/
}


/***PUBS***/

.module-advert{/*Pas Supprimer , c'est ce qui enlève les pubs du forum*/
  display:none;
}
.titrepa{
  background-color: #422E11;
  border-bottom: 3px solid #422E11;
  text-shadow: 0px 0px 5px #422E11;
text-align:center;
  padding: 3px;
  margin: -5px;
}
.fondpage {
  background-color: #422E11;
text-align:justify;
  padding: 5px;
  text-shadow: 0px 0px 5px #422E11;
  margin: 5px;
  border: 3px double #422E11;
  box-shadow: 0px 0px 10px #422E11;
}
.fondnouv {
  background-color: #422E11;
 height:200px;
text-align:justify;
  padding: 5px;
  text-shadow: 0px 0px 5px #422E11;
  margin: 5px;
  border: 3px double #422E11;
  box-shadow: 0px 0px 10px #422E11;
}

.fondcontexte {
  background-color: #422E11;
 height:400px;
  box-shadow: 0px 0px 10px #422E11;
  overflow:auto;
text-align:justify;
  text-shadow: 0px 0px 5px #422E11;
  padding: 5px;
  margin: 5px;
  border: 3px solid #422E11;
}


Merci à toi pour ton aide !

[*Splash*]

En ligne 5 de ton code :

Corrige ceci :

Code:

background-image: url("https://https://i.servimg.com/u/f87/19/93/07/37/darkmo10.jpg");

Par ça :

Code:

background-image: url("https://i.servimg.com/u/f87/19/93/07/37/darkmo10.jpg");

[JLoup13]

Cela ne fonctionne toujours pas.

Hésites pas à me demander des infos, si tu as en as besoin, je sais plus trop quoi te dire pour t'aiguiller

Merci !

[*Splash*]

Ton code CSS semble comporter des erreurs, comme la ligne nput.post qui doit correspondre à input.post je présume.

Là ça dépasse mes piètres compétences dans ce domaine

[JLoup13]

Pas si piètre que ca ! Vu que j'y connais rien xD

merci à toi !

[Riizbaie]

hello,

alors je vois qu'il y a des position absolute, position fixed etc...

le code de base serait plutôt

Code:


.body{
background-image:url('url');
background-color:# /*couleur au cas ou l image ne se charge pas*/;
background-repeat:no-repeat;
}

après tu as le choix entre

background-size: 100% auto; ce qui dit à ton image de prendre la longueur de l'écran sans prendre sa hauteur.
background-size: 100% 100%; prend toute la taille de l'écran
background-size : cover; même chose
background-size : auto 100%; prend la taille de la hauteur de l'écran en restant normal sur la longueur.

si tu souhaites que le fond reste fixe tu rajoutes :
background-attachment:fixed;

ton code css devrait donc ressembler à ceci :

Code:

body{
background-image: url('https://i.servimg.com/u/f87/19/93/07/37/darkmo10.jpg') !important;  
background-repeat:no-repeat;
background-position:top center;
background-size:100% auto;
background-attachment:fixed;
background-color:#000;
}

mais ton image est assez petite et elle est déformée + pixelisée quand on lui donne l'ordre de prendre la largeur de l'écran.[/code]

[*Splash*]

Sur un forum de test, je viens de charger un thème en version phpBB2

Avec le code donné plus haut, celui-ci :

Code:

body {
  background-image: url("https://i.servimg.com/u/f87/19/93/07/37/darkmo10.jpg");   
  background-attachment: fixed !important; 
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: top;
  position: absolute;
  width:100%;
}

Voici le résultat :


Avec le code donné par Riizbaie :

Code:

body{
background-image: url('https://i.servimg.com/u/f87/19/93/07/37/darkmo10.jpg') !important; 
background-repeat:no-repeat;
background-position:top center;
background-size:100% auto;
background-attachment:fixed;
background-color:#000;
}

Le résultat donne ça :


Le résultat est meilleur au niveau du centrage de l'image
Par contre il te faudra choisir une image avec une meilleur résolution

[JLoup13]

Bonjour,

Et bien merci à tous, cela fonctionne

Merci beaucoup !

[Riizbaie]

Pas de problème^^
Mais comme nous t'avons dit tout les deux, il faudrait que tu changes ton image de fond qui est étiré =)

[JLoup13]

Je le ferai oui, j'en cherche une actuellement