28173 sujets

CSS et mise en forme, CSS3

[Résolu] Problem avec un background image

Bonsoir,
dans le header de mon site (ce dernier a une resolution 1024) j'affiche un background de 1440px * 255px ( il es assez large pour la comptabilité avec les grands ecrans)
et je l'affiche en css de cette manniere

.header {
   background-image: url(images/bg2.jpg);
   background-position:center;
   background-repeat: no-repeat;
   height: 225px;
   width: 100%;


seulement j'ai un problem avec la resolution 800x600, le header se deforme et le background ne reste pas dans sa place

quelqu'un a une idée?
Modifié par h4ni (31 Dec 2007 - 10:58)
Modérateur
Salut, Smiley smile

a écrit :
j'affiche un background de 1440px * 255px ( il es assez large pour la comptabilité avec les grands ecrans)
presque... Smiley cligne

Ayant une résolution de 1600 de large, ça ne suffit pas...

Sinon, la propriété background-position prend 2 valeurs combinées pour le positionnement horizontal et vertical.
Exemple:
background-position: bottom center;

a écrit :
le header se deforme et le background ne reste pas dans sa place
Le problème ne se trouve pas dans le code que tu montres. Il y a de fortes chances pour que ce soit un élément compris dans ton entête qui provoque cette déformation.

Questions : Pourquoi une classe header ? Tu comptes en mettre plusieurs sur ta page ?
koala64 a écrit :

Sinon, la propriété background-position prend 2 valeurs combinées pour le positionnement horizontal et vertical.
Exemple:
background-position: bottom center;

Juste pour compléter et être tout à fait précis, attention à l'ordre des déclarations. Si bottom center ne pose pas de problème, des valeurs numériques peuvent à l'inverse être plus délicates à manipuler puisque la première valeur correspondra à l'axe horizontal et la seconde à l'axe vertical.
Autrement dit, le code suivant positionnera l'image de fond dans le coin supérieur droit de l'élément ciblé:
background-position: 100% 0;
Re
je vien d'essayer , mais tjr le meme problem
vous pouvez voir le code de ma page ici

<div class="header">
  <table width="970" height="220" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td><br />
          <br />
          <br />
        <img src="images/logo.gif" width="198" height="41" /><br />
      <br />
    
      <p class="wight">Mercredi 20 Janvier 2008,<br />
        <span class="rouge">Bienvenue sur Dzmusique.com</span><br />
        Musique Alg&eacute;rienne en streaming<br />
        plus de 500 albums index&eacute; et 5600 <br />
        chansons.<br />
        Bonne Visite</p>
      <a href="#">Mettre le site en page d'accueil</a><br />
        <a href="#">Mettre le site en favoris
      </a></td>
      <td width="760" valign="top"><br />
       
            <div class="pub"><br />
                    <br />
                        <br />
                          <div align="center">Pub</div>
                            <p>&nbsp;</p>
            </div>
			<table width="728" height="100" border="0" align="center" cellpadding="0" cellspacing="0" class="alphabet">
              <tr>
                <td height="80" style="background-image:url(images/icones.gif); background-repeat:no-repeat;"><a href="#"><img src="images/spacer.gif" width="60" height="80" border="0" /></a><img src="images/spacer.gif" width="20" height="80" /><a href="#"><img src="images/spacer.gif" width="60" height="80" border="0" /></a><img src="images/spacer.gif" width="20" height="80" /><a href="#"><img src="images/spacer.gif" width="60" height="80" border="0" /></a><img src="images/spacer.gif" width="22" height="80" /><a href="#"><img src="images/spacer.gif" width="60" height="80" border="0" /></a><img src="images/spacer.gif" width="20" height="80" /><a href="#"><img src="images/spacer.gif" width="60" height="80" border="0" /></a><img src="images/spacer.gif" width="22" height="80" /><a href="#"><img src="images/spacer.gif" width="60" height="80" border="0" /></a><img src="images/spacer.gif" width="20" height="80" /><a href="#"><img src="images/spacer.gif" width="60" height="80" border="0" /></a></td>
              </tr>
              <tr>
                <td height="18"><span class="alphabet">Artistes :</span> <span class="wight"><a href="#">0</a>..<a href="#">9</a> - <a href="#">A</a>-<a href="#">B</a>-<a href="#">C</a>-<a href="#">D</a>-<a href="#">E</a>-<a href="#">F</a>-<a href="#">I</a>-<a href="#">G</a>-<a href="#">H</a>-<a href="#">K</a>-<a href="#">L</a>-<a href="#">M</a>-<a href="#">N</a>-<a href="#">O</a>-<a href="#">P</a>-<a href="#">Q</a>-<a href="#">R</a>-<a href="#">S</a>-<a href="#">T</a>-<a href="#">U</a>-<a href="#">V</a>-<a href="#">W</a>-<a href="#">X</a>-<a href="#">Y</a>-<a href="#">Z </a></span></td>
              </tr>
            </table>		</td>
    </tr>
  </table>
</div>



koala64 a écrit :

Questions : Pourquoi une classe header ? Tu comptes en mettre plusieurs sur ta page ?


non je ne l'utilise qu'une seule fois!


bien a vous!
Modifié par h4ni (31 Dec 2007 - 10:26)
h4ni a écrit :
je vien d'essayer , mais tjr le meme problem

J'ai franchement du mal à comprendre ton problème: tu affirmes que ton image de fond te pose des soucis en 800*600, hors le site n'est pas "compatible" (ou en tout cas, pas "optimisé") avec cette résolution.

h4ni a écrit :
non je ne l'utilise qu'une seule fois!

C'est bien ce que koala appréhendait. Smiley cligne
Dans ton cas, tu devrais utiliser un identifiant en lieu et place de ta classe.
Benjamin D.C. a écrit :

J'ai franchement du mal à comprendre ton problème: tu affirmes que ton image de fond te pose des soucis en 800*600, hors le site n'est pas "compatible" (ou en tout cas, pas "optimisé") avec cette résolution.

oui c'est vrais! quand j'ai realisé le desing j'avais pas trop penser a cette resolution! et la je cherche une solution
y'a pas une solution magique qui affiche un css selon la taille de l'ecran? Smiley langue
Sujet clos
Aller à