Problème image de fond (déformation, répétition ou incomplet)

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

Résolu Problème image de fond (déformation, répétition ou incomplet)

Message par Tsuki59 le Ven 3 Juin 2016 - 18:16

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

J'ai un problème avec l'image de fond de mon forum.
J'aimerais mettre mon image en fond sur le forum de façon à ce qu'elle ne se répète pas, qu'elle remplisse tout l'écran et qu'elle ne soit pas déformée. C'est à dire qu'elle apparaisse exactement comme l'original ^^
Mon image fait 1600x1200 px.

J'ai dans un premier temps essayé de l'ajouter simplement sur le forum sans codage mais l'image se répétait et donc ça n'allait pas.

J'ai donc dans un second temps intégré un codage CSS.
J'ai essayé de multiples codages afin d'obtenir l'image comme je le voulais mais à chaque fois ça ne fonctionne pas.
Je me suis renseignée sur internet et je ne comprends pas, car j'utilise bien les bonnes fonctions et donc normalement ça devrait fonctionner.

Quelqu'un pourrait-il m'aider afin de faire apparaître mon image en fond correctement ?

Je vous mets les aperçu des rendus avec les différentes code CSS que j'ai testé (je ne met que les principaux).

Essai avec background-size 100% 100%:


body {
background-image:https://i86.servimg.com/u/f86/19/43/12/27/fond5j13.jpg;
background-size: 100% 100%;
background-position: top-center;
background-repeat:no-repeat;
}

.bodyline{
background: transparent;
border: none;
}

https://i86.servimg.com/u/f86/18/12/62/96/100x1010.jpg
Mon image est déformée dans les 2 sens.

Essai avec background-size auto 100%:


body {
background-image:https://i86.servimg.com/u/f86/19/43/12/27/fond5j13.jpg;
background-size: auto 100%;
background-position: top-center;
background-repeat:no-repeat;
}

.bodyline{
background: transparent;
border: none;
}

https://i86.servimg.com/u/f86/18/12/62/96/auto_110.jpg
Mon image n'est plus déformée mais elle ne remplie plus tout l'espace.

J'ai essayé "background-size : 100% auto" mais dans ce cas l'image est déformée en largeur et coupée en hauteur.

Essai avec background-size :


body {
background-image:https://i86.servimg.com/u/f86/19/43/12/27/fond5j13.jpg;
background-size:cover;
background-position: top-center;
background-repeat:no-repeat;
}

.bodyline{
background: transparent;
border: none;
}

https://i86.servimg.com/u/f86/18/12/62/96/cover10.jpg
Image déformée en largeur et coupée en hauteur.

Essai avec background-size :

body {
background-image:https://i86.servimg.com/u/f86/19/43/12/27/fond5j13.jpg;
background-size:contain;
background-position: top-center;
background-repeat:no-repeat;
}

.bodyline{
background: transparent;
border: none;
}

https://i86.servimg.com/u/f86/18/12/62/96/contai10.jpg
L'image n'est plus déformée mais elle ne remplie plus l'espace complet.

J'ai donc pensé que si je refaisais une image avec une taille différente (en laissant la même hauteur mais en augmentant la largeur, par exemple 2000x1200px) cela réglerait le problème. Mais malheureusement lorsque je fais ça l'image devient flou. Je ne comprends pas pourquoi.

J'espère vraiment que quelqu'un va pouvoir m'aider.

Merci beaucoup d'avance !


Dernière édition par Tsuki59 le Ven 3 Juin 2016 - 23:13, édité 2 fois

Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par MilaFelts le Ven 3 Juin 2016 - 18:30

Coucou !

EDIT : oups ! désolée ne je n'avais pas bien compris ton problème mon code n'est pas pour ça ! je réédite si je vois comment faire !

EDIT 2 : Essaye ceci en mettant des '' autour de l'url de ton image !
Code:
body {
  background-repeat: no-repeat;
  background-position: top center;
background-image: url('URL'); }


Dernière édition par MilaFelts le Ven 3 Juin 2016 - 18:41, édité 1 fois

MilaFelts
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 03/06/2016

http://forum-test-code.forumsactifs.com/
MilaFelts a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par Tsuki59 le Ven 3 Juin 2016 - 18:37

Ah je viens d'essayer ce que tu disais avant et j'étais en train d'écrire que ça ne fonctionnait pas ^^

Merci ^^ J'attends ta réponse si tu trouves =)

Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par MilaFelts le Ven 3 Juin 2016 - 20:55

Je viens de me rendre compte que tu es en phpBB3 ! C'est peut-être pour ça que ça fonctionne pas chez toi. Mon fo' test est en phpBB2. Du coup désolée, je ne saurais pas t'aider. J'espère que quelqu'un qui connait bien le phpBB3 pourra mieux régler ton problème. Bonne chance, bonne soirée et désolée que mon code fonctionne pas chez toi =/

MilaFelts
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 03/06/2016

http://forum-test-code.forumsactifs.com/
MilaFelts a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par Tsuki59 le Ven 3 Juin 2016 - 21:14

Ah désolée, c'est moi qui est fait une erreur.
Je suis bien en phpBB2.

Désolée pour l'erreur

Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par MilaFelts le Ven 3 Juin 2016 - 21:16

Et le code ne fonctionne pas ? Tu peux me faire voir une capture d'écran de ce que ça fait ?

MilaFelts
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 03/06/2016

http://forum-test-code.forumsactifs.com/
MilaFelts a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par Tsuki59 le Ven 3 Juin 2016 - 21:56

Voilà ce que ça fait :



L'image n'apparait pas du tout.

Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par MilaFelts le Ven 3 Juin 2016 - 22:05

Tu pourrais me donner l'adresse de l'image que tu tentes de mettre s'il te plait ? Je vais tester avec ton image voir si ça continue de marcher chez moi ou si ça fait comme toi.

MilaFelts
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 03/06/2016

http://forum-test-code.forumsactifs.com/
MilaFelts a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par Tsuki59 le Ven 3 Juin 2016 - 22:12

Voilà l'adresse l'image test ^^ : https://i86.servimg.com/u/f86/19/43/12/27/fond_g14.jpg

Merci pour ton aide en tout cas =)

Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par MilaFelts le Ven 3 Juin 2016 - 22:22

ça fonctionne bien chez moi !
Regarde=> image centré et pas déformé ! C'est ça que tu recherches ? (qu'elle soit coupée en haut je cherche à régler ça)

Du coup est ce que tu pourrais me donner tout ton css voir s'il aurait pas quelque chose qui fait que chez toi ça fonctionne pas ?

MilaFelts
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 03/06/2016

http://forum-test-code.forumsactifs.com/
MilaFelts a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par Tsuki59 le Ven 3 Juin 2016 - 22:32

Non ce n'est pas ça que je cherche ^^' Je me suis peut-être mal exprimé si tu pensais que c'était ça, désolée ^^
Mais je ne veux pas le mettre en bannière mais en fond du forum ^^

Comme ça mais en non déformé, non coupé et non flou ^^ :


Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par MilaFelts le Ven 3 Juin 2016 - 22:44

Mon image est pas en bannière est bien en fond c'est juste que l'image que tu m'as donné est en 800*600, 800 est la largeur de mon forum et l'espace entre ma barre de navigation et le haut de mon forum fait plus de 600, mais elle est bien en fond ! Par contre si tu veux qu'elle fait la largeur de ton écran s'en être déformé et bien il faut faire une image de la largeur de ton écran ! et après pour que le fond reste tout le temps même quand tu descends ton fo' pour voir les catégorie il faudra le fixer (je l'ai fait sur mon fo' si tu veux aller voir !)

MilaFelts
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 03/06/2016

http://forum-test-code.forumsactifs.com/
MilaFelts a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par Tsuki59 le Ven 3 Juin 2016 - 23:13

Bon alors désolée, je vais passer pour une débile ^^' mais grâce à ta remarque je me suis dit "C'est pas normal que mon image fasse 800x600px alors qu'à la base c'est pas ça." Et donc c'est là que je me suis rendu compte de ma grosse erreur.
En fait, je n'ai pas fait attention mais servimg redimensionne automatiquement mon image et il fallait tout simplement mettre "non" au redimensionnement.
En ayant fait ça, mon problème est réglé.

Vraiment désolée pour le dérangement ! Mais merci à toi quand même car sans ta remarque je pense que j'aurais encore cherché ^^

Tsuki59
Nouveau membre

Messages : 10
Inscrit(e) le : 19/03/2016

http://jpopjapan.forumactif.org/
Tsuki59 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème image de fond (déformation, répétition ou incomplet)

Message par MilaFelts le Ven 3 Juin 2016 - 23:25

Oh ben tant mieux si ça s'arrange alors ! Par contre pour l'espace entre la toolbar et l'image de fond je ne sais pas comment on fait, peut-être que tu devrais ouvrir un nouveau sujet pour cette demande spécifique maintenant que tu as réussi à bien placer ton fond et classer le sujet ici comme résolu.

Dans tous les cas bon courage pour la suite et bonne soirée !

MilaFelts
Nouveau membre

Féminin
Messages : 12
Inscrit(e) le : 03/06/2016

http://forum-test-code.forumsactifs.com/
MilaFelts 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