L'image de fond ne répète pas

2 participants

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

Résolu L'image de fond ne répète pas

Message par Thitest Jeu 6 Déc 2012 - 11:13

Bonjour à tous,

Je suis Thitest, détenteur d'un forum qui va subir une grosse modification aujourd'hui. Je suis le fondateur d'un groupe de développeurs de jeux-vidéos et pour la sortie de notre nouveau jeu, j'ai décidé de changer le design du forum, que je désire mettre en cohérence avec celui du site.

Cliquez-ici pour voir le forum

Cependant, après une très grande personnification du CSS (Forum sous phpBB3), je rencontre un problème. Je compte mettre ceci comme fond des messages/posts, comme fond pour les modules ou encore les catégories. Jusque là je savais le faire, or je suis obligé de faire un fond d'une taille astronomique pour répéter mon image qui est celle-ci.



If faut avouer que la première image fait 200ko pour environ 2000x2000 de résolution.
Pourtant ce serait plutôt simple de faire seulement une image d'un Ko qui se répète indéfiniment ? Pour information, l'image dont je vous parle a un motif : des carrés.
Donc ce n'est pas qu'une seule couleur comme vous pouvez le constater.

J'aimerais donc que vous m'aidiez sur ça. Comment faire en sorte que l'image de fond des catégories, des messages, des posts...se répète indéfiniment ?

Si vous voulez voir mon CSS (Attention, il est fort probable que certains codes ne servent à rien. Je n'ais pas trier.

Spoiler:

Merci de votre aide!


Dernière édition par Thitest le Jeu 6 Déc 2012 - 12:27, édité 1 fois
Thitest

Thitest
**

Masculin
Messages : 50
Inscrit(e) le : 07/10/2012

http://www.phoenix-interactive.net
Thitest a été remercié(e) par l'auteur de ce sujet.

Résolu Re: L'image de fond ne répète pas

Message par Ea Jeu 6 Déc 2012 - 12:21

Bonjour,


Vu le motif, une image de 4 pixels devraient suffire :
https://i.imgur.com/qD1X1.png

Ensuite pour ce qui est de permettre les répétitions, si je cherche dans votre css l'image en question "http://media.moddb.com/images/groups/1/7/6757/fond.1.png", il y a ces codes qui la mettent l'image comme image de fond :

Code:
.bodyline{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png)}

td.row2{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png)}

td.row3{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png)}

body.post{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-repeat:repeat}

.post{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-color:#0c0c0c;background-position:100% 0;background-repeat:no-repeat;border-radius:0;margin-bottom:4px;padding:0 10px}

post td{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-position:top center;background-repeat:repeat}

.forabg{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-image:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);border:1px solid #101010;border-radius:0;clear:both;margin-bottom:4px;padding:0 5px}

.forumbg{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-color:#0c0c0c;background-image:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);border:1px solid #1e1e1e;border-radius:0;clear:both;margin-bottom:4px;padding:0 5px}

.panel{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-color:#0c0c0c;background-image:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-repeat:repeat-x;border:1px solid #101010;border-radius:0;margin-bottom:4px;padding:0 10px}

.module{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-color:#0c0c0c;background-image:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-repeat:repeat-x;border:1px solid #101010;border-radius:0}
Dans cela :



  • Code:
    .bodyline{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png)}

    td.row2{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png)}

    td.row3{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png)}
    à ma connaissance ça ne sert à rien sur phpbb3 ( c'est pour phpbb2 ).



  • Code:
    body.post{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-repeat:repeat}
    ce serait un élément <body class="post"> et il n'y a cela nulle part, donc ne sert à rien non plus.



  • Code:
    .post{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-color:#0c0c0c;background-position:100% 0;background-repeat:no-repeat;border-radius:0;margin-bottom:4px;padding:0 10px}
    Touche certains champs de texte de formulaire ( nom d'utilisateur et mot de passe par exemple ) et les blocs qui entourent chaque message dans l'affichage d'un sujet.

    Par défaut il y a une répétition du fond, mais là dans le code il est mis background-repeat:no-repeat; il faudrait soit le supprimer, soit mettre background-repeat:repeat; à la place ;]



  • Code:
    post td{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-position:top center;background-repeat:repeat}
    cela s'applique aux éléments <td> dans un <post> ce qui à ma connaissance n'existe pas, donc ça ne sert à rien.



  • Code:
    .forabg{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-image:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);border:1px solid #101010;border-radius:0;clear:both;margin-bottom:4px;padding:0 5px}
    Cela s'applique au bloc autour d'un cadre comme une catégorie sur l'index.

    Là il n'y a pas de code pour ne pas que le fond se répète, mais plus haut il y a :

    Code:
    .forabg{background-color:#0c0c0c;background-image:url(http://2img.net/i/fa/empty.gif);background-position:0 0;background-repeat:repeat-x;border:2px solid #0c0c0c;clear:both;margin-bottom:4px;padding:0 5px}
    dans lequel se trouve :

    Code:
    background-repeat:repeat-x;
    qui indique que l'image de fond ne doit se répéter qu'horizontalement ( sur l'axe des x ).

    Pour contrer cela, il faudrait mettre dans le css :

    Code:
    .forabg { background-repeat: repeat; }
    de cette manière il devra y avoir répétition horizontalement et verticalement.



  • Code:
    .forumbg{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-color:#0c0c0c;background-image:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);border:1px solid #1e1e1e;border-radius:0;clear:both;margin-bottom:4px;padding:0 5px}
    Ce code là cible le bloc qui entoure par exemple une liste de sujet. Comme le cas au dessus le code en lui-même n'a pas de demande pour que le fond ne se répète pas, mais il y a un code plus haut ( dans le css de base ) :

    Code:
    .forumbg{background-color:#0c0c0c;background-image:url(http://2img.net/i/fa/empty.gif);background-position:0 0;background-repeat:repeat-x;border:2px solid #0c0c0c;clear:both;margin-bottom:4px;padding:0 5px}
    qui indique aussi que le fond ne doit se répéter qu'horizontalement ( en fait si il y a ce code c'est pour pouvoir mettre une barre de titre juste, et pas un fond sur le tout ).

    Comme au dessus pour permettre au fond de se répéter dans les 2 directions, il faut ajouter ce code css :

    Code:
    .forumbg { background-repeat: repeat; }



  • Code:
    .panel{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-color:#0c0c0c;background-image:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-repeat:repeat-x;border:1px solid #101010;border-radius:0;margin-bottom:4px;padding:0 10px}
    Ceci ça touche certains panneaux, comme le panneau de connexion sur la page d'accueil ( quand on est pas connecté ).

    Il y a directement dedans :

    Code:
    background-repeat:repeat-x;
    qui ne permet au fond que de se répéter horizontalement, donc il faudrait le supprimer ou le changer en :

    Code:
    background-repeat:repeat;



  • Code:
    .module{-khtml-border-radius:0;-moz-border-radius:0;-webkit-border-radius:0;background-color:#0c0c0c;background-image:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-repeat:repeat-x;border:1px solid #101010;border-radius:0}
    cela cible les blocs entourant les modules/widgets ( comme le widget suivez-nous ). Pareillement au précédent, vous pouvez retirer/modifier le background-repeat:repeat-x;

Cordialement.
Ea

Ea
Aidactif
Aidactif

Messages : 23583
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: L'image de fond ne répète pas

Message par Thitest Jeu 6 Déc 2012 - 12:27

Rebonjour,

Un grand merci ! Cela marche.
Oui, le CSS est très mal rangé, grâce à vous je vais le rendre plus agréable.
En tout cas, merci de votre aide. Vous pouvez verrouiller et je vais mettre l'icône Résolu.


Dernière édition par Chacha le Jeu 6 Déc 2012 - 12:39, édité 1 fois (Raison : Gras supprimé => réservé à la modération)
Thitest

Thitest
**

Masculin
Messages : 50
Inscrit(e) le : 07/10/2012

http://www.phoenix-interactive.net
Thitest a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum