Image de fond

[birguite]

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : ça fait un moment
Lien du forum : http://www.chezbri.net/index.htm

Description du problème

Bonjour,

Je n'avais pas fait attention car il me semble que dans le temps je n'avais pas ce souci :
l'image de fond du forum se répète au lieu de ne faire qu'un.........
et ça me gêne pour une faire une décoration dessus
que puis-je faire sachant que je ne maitrise pas le css?

Merci beaucoup

[creange]

Bonjour Birguite

il va falloir mettre ce petit code dans ton css    



donc direction le PA ===> Affichage ===> couleur et css
ensuite à coté de couleurs c'est marqué Feuille de style tu clic dessus
et ensuite tu colles ton code dans la ligne 1

Code:


body {
  background-image:url(ici tu mets l'adresse de ton image de fond);
  background-size: 100% auto;
}


coches comme ceci avant de valider et d'enregistrer





j'espère que ça va marcher
bonne soirée

[birguite]

Bonsoir créange,



Oui j'ai fait un essai sur mon forum test mais du coup les images sont immenses

https://veneztrinquer.forumgratuit.org/ forum test

et c'est l'image de mon café (voir mon forum)


je verrai si j'ai une réponse demain............ je suis hs ce soir

à demain
bonne soirée

[creange]

petite question as tu essayé de mettre la banière à gauche ?
peut être qu'elle serait mieux centrée par rapport à ton image de fond ...

[marcophil]

bonjour birguite
avez vous mis un code spécifique à votre image de font..?
je vois que sur servimg
votre image : cliquez ici
est en 1300x863 et très net..
et sur votre forum il est comme étiré ( un peu flou )
j'avais ce code pour palier le repeat dont forumactif a résolu entre temps
pour le phbb3 je doute..

Code:

body {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: top center;

sur la 2eme image de créange de mon côté c'est sur non.

[birguite]

Bonsoir Marcophil,


Des problèmes de connexion m'ont éloignée et m'éloignent de mon pc depuis hier
j'ai une intervention demain
je reviens vers vous dès que tout est ok

mais pour répondre à votre question : non, je n'ai pas de code spécifique pour mon image


je repasse demain

bonne soirée

[marcophil]

le fond semble parfait..
le logo est trop grand 1200x294
faite un test avec les 2 images redimensionné en cliquant dessus
voir s'il rentre dans le cadre.
800x294


1000x245


les enregistrer sur votre espace

[creange]

Birguitte c'est également ce que je pensais
le logo est trop grand
je pense que la 1ere banière redimensionnée par marcophil conviendra

bonne nuit à vous

[birguite]

Bonjour à vous,

le problème de l'image de fond je l'ai réglé en utilisant le css donné par Créange
mais en modifiant le " % "

par contre la bannière est parfaite en l'état chez moi

Spoiler:

(là je vais régler le fond et ce sera ok)

donc tout baigne pour moi
je vous remercie tous les deux et vous souhaitent de belles fêtes de fin d'année

[marcophil]

désolé mais de mon côté je vois ceci
tout aussi bien edge et  opera

[birguite]

sur mon portable moi aussi et j'ai fait un ctrl+ et l'image est revenue au centre

[MlleAlys]

Bonjour,
La largeur du forum est en %, donc dépend de la taille de l'écran de l'utilisateur. C'est pour ça que avec une même image, le logo peut déborder chez certaines personnes et pas chez d'autres.
Pour éviter que le logo ne déborde, peu importe sa taille, vous pouvez ajouter ce code dans votre css :

Code:



/*taille image logo*/
a#logo, a#logo img {
  padding: 0;
  max-width: 100%;
}



Pour l'image de fond, à la place du code proposé plus haut par creange :

Code:

body {
  background-image:url(ici tu mets l'adresse de ton image de fond);
  background-size: 100% auto;
}

(l'image se répète en largeur, et en hauteur sur des formats téléphone/tablette)
Il existe aussi celui-ci, qui est plus général :

Code:

body {
  background-size: cover;
  background-position: top;
}

La propriété "cover" permet de donner automatiquement à l'image la taille minimale pour couvrir l'écran sans déformation ni répétition.
(et background-position détermine la position de l'image de fond : top = alignée en haut, center = centrée, etc)

[creange]

MlleAlys  j'en profite pour prendre le code également 

Merci Birguite belle fête de fin d'année à toi aussi 

[birguite]

merci et à vous tous aussi

je vais me débrouiller avec tous vos conseils

je mets en résolu_