[Absolution V2] Image de fond à adapter

[OptimaluS]

Bonsoir à tous,

Mon problème actuelle et que je n'arrive pas à voir correctement mon image de fond sur mon forum en construction (Répétition).
J'aimerais l'adapter pour chaque résolution, bien évidemment j'ai trouver ce tutoriel http://forums.phpbb-fr.com/documentatio ... 83479.html mets ca ne s'applique pas pour ce thème.

Pourriez-vous m'aidez à l'adapter sur mon thème actuel ?

Le lien de mon forum http://sosordi.3web-heberg.com/index.php


Merci d'avance.

[sub60]

Hello,

mets ca ne s'applique pas pour ce thème.

bizarre car tester en local et ça fonctionne avec Absolution v2, pour preuve =>

c'est le background du tuto, et en plus j'ai même pas viré le background d'origine du body

juste qu'il faut pas faire n importe quoi, j'explique:
a l'origine il y a un background sur la classe body , tu la viré et tu la mis sur la classe noise, un background général ce met uniquement sur body.

donc remet tout comme a l'origine et tu verra que ça fonctionne

ps: pour éviter de faire des bêtises, on remplace ce qui existe, mais on invente pas (ça t'aurais éviter ce déboire

[OptimaluS]

Bonjour Sub ,

Merci pour cette réponse mets quelle est cette partie exacte dont tu parle , que j'aurais virer ?

Doit-je suivre le tuto telle q'elle ?

[sub60]

Bon je récapitule,

d'origine dans colours.css

Code : Tout sélectionner

html, body {
	color: #15375c;
	background: url("{T_THEME_PATH}/images/bodybg.gif") repeat-x left top #093059;
	font-family: "Verdana", Tahoma, Geneva, sans-serif;
	height: 100% !important;
}

c'est la que ce trouve le background général (le fond bleu d'origine), que toi tu a supprimer.

dans absolution.css

Code : Tout sélectionner

.noise {
	background-image: url("{T_THEME_PATH}/images/noise.png");
	min-height: 100% !important;
}

c'est ici que toi tu a mis le background général(c'est la que c'est pas bon, le background que tu veut afficher n'a rien a faire la)
donc, essaie en supprimant ce background, et applique le tuto que tu cite

[OptimaluS]

Voici ce que cela donne http://sosordi.3web-heberg.com

Donc que faut t'il que je touche pour que ça soie centrer correctement et en quelle taille doit être mon image de fond car la elle est est zoomer ?

[sub60]

Alors pour recentrer le forum, dans common.css

Code : Tout sélectionner

#wrap {
   position: relative;
   padding: 0;
   min-width: 650px;
}

ajoute cette propriété

Code : Tout sélectionner

margin: 0 auto;

ben la ton image est beaucoup trop petite: http://sosordi.3web-heberg.com/styles/a ... bodybg.gif 650px x 488px pourquoi avoir réduite l'original ? sinon je pense que 1400x900 devrait suffire (faut tester)

[OptimaluS]

Je test çà de suite...

Voila, centrage forum ok, Image pas bonne en la mettant dans la taille que tu ma indiquer et de plus je ne voit plus la panneau d'admin en bas et le reste.

[sub60]

ha oui, je vois quoi, dans absolution.css

Code : Tout sélectionner

.footer {
   	min-height: 70px;
	margin: -4px auto 0;
	background: url("{T_THEME_PATH}/images/footerlight.gif") no-repeat 50% top;
	text-align: center;
	padding: 20px 0;
	color: #c9e3ff;
	text-shadow: 0 5px 5px #000000;
	line-height: 20px;
}

ajoute la propriété

Code : Tout sélectionner

position: relative;

et il faudra peut être adapter le footer vu qu'il y a une image en background.

ben comme j'avais dit pour l'image faut faire des test voir ce qui convient le mieux, mais généralement 1440x900 ça passe plutot bien

éditer: j'vient de trouver un truc pour ton image, dans common.css

Code : Tout sélectionner

#fond {
   position: fixed;
   top: 0;
   left: 0;
}

remplace par

Code : Tout sélectionner

#fond {
   position: fixed;
   bottom: 0;
   left: 0;
}

ça va la remonter un peut

[OptimaluS]

Ok pour le footer c'est régler, il me reste plus cas tester sous differrent tailles.

Par contre il n'y rien a ajouter dans ce code donné sur le tuto (largeur/hauteur) ?

Code : Tout sélectionner

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
// <![CDATA[
   $(function() {   
   
      var theWindow        = $(window),
         $bg              = $("#fond"),
         aspectRatio      = $bg.width() / $bg.height();
                           
      function resizeBg() {
         
         if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
               .removeClass()
               .addClass('hauteur');
         } else {
            $bg
               .removeClass()
               .addClass('largeur');
         }
                  
      }
                           
      theWindow.resize(function() {
         resizeBg();
      }).trigger("resize");
   
   });
// ]]>
</script>

[sub60]

j'ai éditer entre temps

nan touche a rien dans ce code.