[Résolu] problème background-repeat

problème background-repeat [Résolu] - HTML/CSS - Programmation

Marsh Posté le 28-07-2008 à 14:59:57    

Bonjour à tous,
 
Comme indiqué dans le titre je me trouve confronté à un problème d'étirement d'une image en background. J'ai un encart dans lequel va se greffer du texte. Je souhaite qu'il s'étire en fonction du texte qu'il y a à l'intérieur.
 
Mon soucis est que mon image de fond se duplique au lieu de s'étirer :(. Je souhaiterais que seulement "les bords" de mon image s'étirent.
 
Voilà le lien de ma page de test : http://anthony.landes.free.fr/essais/test1.php  
 
Je vous mets le code html :

Code :
  1. <body bgcolor="#FFFFFF">
  4.   <div id="header"></div>
  7.   <div id="conteneur">
  10.   <div id="centre">
  11.   <!-- centre !-->
  12.      
  13.    
  14.      
  15.       <div id="titre-cadre-description"></div>
  16.       <div id="cadre-description"><div class="texte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nunc. Quisque tincidunt purus non libero. Morbi venenatis ultrices ante. Integer fermentum ultrices tortor. Donec eu nibh. Donec ut massa vitae lectus iaculis ultrices. Duis faucibus vulputate sapien. Aliquam mi sapien, adipiscing id, adipiscing eget, scelerisque sed, purus. Maecenas nec libero ac quam venenatis porttitor. Mauris vel neque. Praesent sit amet nulla auctor nulla consequat lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dui sed nulla aliquam lobortis.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque nunc. Quisque tincidunt purus non libero. Morbi venenatis ultrices ante. Integer fermentum ultrices tortor. Donec eu nibh. Donec ut massa vitae lectus iaculis ultrices. Duis faucibus vulputate sapien. Aliquam mi sapien, adipiscing id, adipiscing eget, scelerisque sed, purus. Maecenas nec libero ac quam venenatis porttitor. Mauris vel neque. Praesent sit amet nulla auctor nulla consequat lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vel dui sed nulla aliquam lobortis.</div></div>
  17.  
  18. </div>
  19. </body>


et le CSS correspondant :

Code :
  1. body {
  2. width: 100%;
  3. margin: 0px auto;
  4. font-family:Verdana, Arial, Helvetica, sans-serif;
  5. padding-top: 10px;
  6. }
  8. #conteneur {
  9. width: 957px;
  10. margin-top: 50px;
  11.         margin-left: auto;
  12.         margin-right: auto;
  13. }
  15. #header {
  16. height: 113px;
  17. background-image: url(../images-css/header-logo-bien.jpg);
  18. background-repeat: repeat-x;
  19. margin-top: -10px;
  20. z-index: 0;
  21. }
  23. #cadre-description{
  24. width: 443px;
  25. background-image:url(../images-css/cadre-coordonnees.jpg); // => l'image que je souhaite étirer
  26. background-repeat: repeat-y;
  27. margin-left: 480px;
  28. margin-top: 6px;
  29. z-index: 0;
  30. }
  32. #titre-cadre-description{
  33. position: absolute;
  34. width: 438px;
  35. height: 30px;
  36. background-image:url(../images-css/titre-cadre.png);
  37. background-repeat:no-repeat;
  38. margin-left: 484px;
  39. margin-top: 10px;
  40. z-index: 2;
  41. }
  43. .texte {
  44. padding-left:10px;
  45. padding-left: 10px;
  46. padding-top: 16px;
  47. color:#CCCCCC;
  48. }
  50. #haut {
  51.         padding-top:28px;
  52. width: 957px;
  53. height: 39px;
  54. margin-left: auto;
  55.         margin-right: auto;
  56. }
  58. #centre {
  59. background-color:#FFFFFF;
  60. background-repeat:repeat-y;
  61. font-size: 11px;
  62. font-weight: bold;
  63. width: 956px;
  64. margin-left: auto;
  65.         margin-right: auto;
  66. padding-top: 1px;
  67. }


J'imagine que mon image se duplique car une fois sa taille maximale atteinte elle ne peut rien faire d'autre. Dans ce cas, quelle est la solution à adopter ?
 
Merci par avance pour votre aide


Message édité par Antho03 le 29-07-2008 à 16:15:37
Reply

Marsh Posté le 28-07-2008 à 14:59:57   

Reply

Marsh Posté le 28-07-2008 à 15:01:46    

On peut pas étirer magiquement une image comme ça. Déjà à la base en CSS pur c'est pas trop possible avec la propriété background, mais en plus ça va faire moche si conteneur trop grand.
 
Une solution vite-fait, c'est découper l'image en coins et bordures et tout, et mettre des divs vides dans les coins... Après y'a plein d'autres méthodes avec avantages et défauts.

Reply

Marsh Posté le 28-07-2008 à 15:27:27    

Ok, je te remercie. Je vais aller dans ce sens. Si quelqu'un voit d'autres solutions, je suis preneur.

Reply

Marsh Posté le 29-07-2008 à 16:14:36    

Problème résolu en découpant l'image.
 
Merci pour ton aide

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed