Antho03 | 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 :
- <body bgcolor="#FFFFFF">
- <div id="header"></div>
- <div id="conteneur">
- <div id="centre">
- <!-- centre !-->
-
-
-
- <div id="titre-cadre-description"></div>
- <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>
-
- </div>
- </body>
|
et le CSS correspondant :
Code :
- body {
- width: 100%;
- margin: 0px auto;
- font-family:Verdana, Arial, Helvetica, sans-serif;
- padding-top: 10px;
- }
- #conteneur {
- width: 957px;
- margin-top: 50px;
- margin-left: auto;
- margin-right: auto;
- }
- #header {
- height: 113px;
- background-image: url(../images-css/header-logo-bien.jpg);
- background-repeat: repeat-x;
- margin-top: -10px;
- z-index: 0;
- }
- #cadre-description{
- width: 443px;
- background-image:url(../images-css/cadre-coordonnees.jpg); // => l'image que je souhaite étirer
- background-repeat: repeat-y;
- margin-left: 480px;
- margin-top: 6px;
- z-index: 0;
- }
- #titre-cadre-description{
- position: absolute;
- width: 438px;
- height: 30px;
- background-image:url(../images-css/titre-cadre.png);
- background-repeat:no-repeat;
- margin-left: 484px;
- margin-top: 10px;
- z-index: 2;
- }
- .texte {
- padding-left:10px;
- padding-left: 10px;
- padding-top: 16px;
- color:#CCCCCC;
- }
- #haut {
- padding-top:28px;
- width: 957px;
- height: 39px;
- margin-left: auto;
- margin-right: auto;
- }
- #centre {
- background-color:#FFFFFF;
- background-repeat:repeat-y;
- font-size: 11px;
- font-weight: bold;
- width: 956px;
- margin-left: auto;
- margin-right: auto;
- padding-top: 1px;
- }
|
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
|
