L'image de fond ne répète pas
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
L'image de fond ne répète pas
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.
Merci de votre aide!
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.
- Voici celle que je suis obligé de faire :
Image en grande résolution - Voici ce que j'aimerais ajouter seulement :
Image désirée
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:
- Code:
#wrap {
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
padding: 0px;
}
.forumline.table1.bg3{
border-radius:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;}
.forabg, .forumbg {
border: none;
}
.forumline {-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
padding: 0px;
}
div, table {
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
border: none;
}
a.forumlink {
text-shadow: #1B1C20; 1px 1px 1px;
}
.row3 a {
text-shadow: #1B1C20; 1px 1px 1px;
}
.name div span {
text-shadow: #1B1C20; 1px 1px 1px;
}
.statistiques a {
text-shadow: #1B1C20; 1px 1px 1px;
}
body {background-repeat: no-repeat ;
background-position: top center;
background-attachment: no-fixed ;}
a.mainmenu[href="/gallery/index.htm"] { display: none; }
a.mainmenu[href="/calendar"] { display: none; }
a.mainmenu[href="/memberlist"] { display: none; }
a.mainmenu[href="/groups"] { display: none; }
a.mainmenu[href="/faq"] { display: none; }
a.mainmenu[href="/search"] { display: none; }
a.mainmenu[href="/register"] { display: none; }
.forumline {
margin-top:100px;
}
.bodylinewidth {
border: 1px solid #FFFFFF;
box-shadow: 0 0 20px black;
}
dl.codebox {
color: ##F2F2F2;
background-color: #1B1C20;
border: none;} /*backgrounds ligne boutons de code et spoiler*/
#chatbox_header .cattitle strong { display: Réseau Social de Phoenix; }
#chatbox_header .cattitle:before { content: "Réseau social de Phoenix"; }
body.chatbox {
background-image: url('http://www.pimagenda.com/wp-content/uploads/2008/10/discussion.png');
}
.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');}
.rouge {
background: url('http://image.noelshack.com/fichiers/2012/42/1350576968-spoiler.png');
border: 3px solid red;
padding: 5px;
border-radius: 10px;
box-shadow: 2px 2px 2px red;}
.vert {
background: url('http://image.noelshack.com/fichiers/2012/42/1350576968-spoiler.png');
border: 3px solid green;
padding: 5px;
border-radius: 10px;
box-shadow: 2px 2px 2px green;}
.bleu {
background: url('http://image.noelshack.com/fichiers/2012/42/1350576968-spoiler.png');
border: 3px solid blue;
padding: 5px;
border-radius: 10px;
box-shadow: 2px 2px 2px blue;}
.orange {
background: url('http://image.noelshack.com/fichiers/2012/42/1350576968-spoiler.png');
border: 3px solid orange;
padding: 5px;
border-radius: 10px;
box-shadow: 2px 2px 2px orange;}
.bloc {
background: url('http://image.noelshack.com/fichiers/2012/42/1350576968-spoiler.png');
border: 1px solid black;
padding: 1px;
border-radius: 2px;
box-shadow: 2px 2px 2px black;}
.bloc2 {
background: url('http://image.noelshack.com/fichiers/2012/42/1350576968-spoiler.png');
border: 1px solid black;
padding: 1px;
border-radius: 2px;
box-shadow: 2px 2px 2px black;}
body.post {
background-repeat: repeat;
background: url('http://image.noelshack.com/fichiers/2012/49/1354787646-test.png');
}
.post {
background-repeat:repeat;
background: url('http://image.noelshack.com/fichiers/2012/49/1354787646-test.png');
background-repeat:repeat;
background-position: top center;
}
post td {
background-repeat: repeat;
background: url('http://image.noelshack.com/fichiers/2012/49/1354787646-test.png');
background-repeat:repeat;
background-position: top center;
}
.postdetails.poster-profile a img {
background-color: none;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px;
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
}
#search{
display:none;
}
#wrap {
background-repeat: repeat-x;
background-image: url('');
background: alpha(0.5);
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
.inputbox {
border: 1px solid #0c0c0c;
color: #ffffff;
padding: 2px;
cursor: text;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
#text_editor_controls a.button2,#text_editor_controls input.button2,#text_editor_controls button.button2{
background-image: url(http://2img.net/i/fa/prosilver/bg_button.gif);
color: black;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
padding: 3px;}
.inputbox:hover {
border: 1px solid #0c0c0c;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
border-color: #171924;
-moz-box-shadow : 0 0 9px #fff;
-webkit-box-shadow : 0 0 9px #fff;
}
input.button1, input.button2, button.button2 {
font-size: 1em;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
fieldset dl {
padding: 4px 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
fieldset.fields1 dt {
width: 10em;
border-right-width: 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
fieldset.submit-buttons {
text-align: center;
vertical-align: middle;
margin: 5px 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
.navbar {
background: none;
padding:0px 0px;
border: 0px solid #FFFFFF0;
background-repeat: repeat-x;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
background-color: #FFFFFF0;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
}
dl.codebox {
padding: 3px;
background-color: #0c0c0c;
border: 1px solid #C9D2D8;
font-size: 1em;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
border: 1px solid #101010;
}
.forabg {
margin-bottom: 4px;
clear: both;
border: 2px solid #;
padding: 0px 5px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
border: 1px solid #101010;
background-image: url('http://media.moddb.com/images/groups/1/7/6757/fond.1.png');
}
.forumbg {
background-color: #0c0c0c;
background-image: url('http://media.moddb.com/images/groups/1/7/6757/fond.1.png');
border: 2px solid #;
padding: 0px 5px;
margin-bottom: 4px;
clear: both;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
border: 1px solid #1e1e1e;
}
.panel {
margin-bottom: 4px;
padding: 0px 10px;
background-image: url('http://media.moddb.com/images/groups/1/7/6757/fond.1.png');
border: 1px solid #101010;
background-repeat: repeat-x;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
background-color: #0c0c0c;
border: 1px solid #101010;
}
.post {
padding: 0 10px;
margin-bottom: 4px;
background-repeat: no-repeat;
background-position: 100% 0;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
background-color: #0c0c0c;
}
.postprofile {
color: #F2F2F2
margin: 5px 0 0px 0;
min-height: 80px;
border-right-style: solid;
border-right-width: 1px;
border-color: transparent;
width: 22%;
float: left;
display: inline;
position: relative;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 1px;
border-radius: 0px;
}
#cp-main {
float: left;
width: 98%;
margin-left: 20px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
#cp-main .panel {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
#cp-main table.table1 {
margin-bottom: 1em;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
#ucp-main table.table1 {
padding: 2px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
#tabs {
line-height: normal;
margin: 20px 0 -1px 7px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
/*min-width: 570px;
*/
}
#smiley-box {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
ul.profile-icons {
margin-top: 10px;
list-style: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
#message-box textarea {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
}
.module {
background-image: url('http://media.moddb.com/images/groups/1/7/6757/fond.1.png');
border: 1px solid #101010;
background-repeat: repeat-x;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
background-color: #0c0c0c;
}
mini_ava {
float: left;
}
.mini_ava img {
width: 40px;
height: 40px;
margin: 0 5px;
border-radius: 0px;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
-o-transition: all 2s;
}
.mini_ava img:hover
{
width: 80px;
height: 80px;
}
.signature {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
border-color: #171924;
-moz-box-shadow : 0 0 9px #fff;
-webkit-box-shadow : 0 0 9px #fff;
}
body.chatbox {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-khtml-border-radius: 0px;
border-radius: 0px;
background-image: url('');
}
div .FondateurDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349897418-fondateur.png");
background-position: bottom right;
}
div .AdministrateurDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349718936-administrateur.png");
background-position: bottom right;
}
div .CoadminDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349718936-coadmin.png");
background-position: bottom right;
}
div .ChefmoddeurDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349718936-chefmoddeur.png");
background-position: bottom right;
}
div .ModdeurDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349718936-moddeur.png");
background-position: bottom right;
}
div .ChefmoderateurDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349721257-chefmoderateur.png");
background-position: bottom right;
}
div .ModerateurDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349721257-moderateur.png");
background-position: bottom right;
}
div .BetatesteurDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349718937-betatesteur.png");
background-position: bottom right;
}
div .VipDegrade {
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349718937-membrevip.png");
background-position: bottom right;
}
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background-image: url("http://image.noelshack.com/fichiers/2012/41/1349718937-membrevip.png");
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
Merci de votre aide!
Dernière édition par Thitest le Jeu 6 Déc 2012 - 12:27, édité 1 fois
Re: L'image de fond ne répète pas
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 :
Cordialement.
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}
- 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)}
- Code:
body.post{background:url(http://media.moddb.com/images/groups/1/7/6757/fond.1.png);background-repeat:repeat}
- 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}
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}
- 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}
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}
- Code:
background-repeat:repeat-x;
Pour contrer cela, il faudrait mettre dans le css :- Code:
.forabg { background-repeat: repeat; }
- 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}
- 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}
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}
Il y a directement dedans :- Code:
background-repeat:repeat-x;
- 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}
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: L'image de fond ne répète pas
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.
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)
Sujets similaires
» Fond d'écran qui ne se répète pas
» Fond non répété
» fond d'image répété
» Image de fond qui se répète
» Header de fond qui se répète ..
» Fond non répété
» fond d'image répété
» Image de fond qui se répète
» Header de fond qui se répète ..
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum