Problème positionnement image background

[truitas]

Bonjour à tous,

je tente de refaire complètement mon site en html5 et ccs3.

Mon site est entièrement fluide

je veux placer une image répétée en bordure extérieure de ma page gauche et droite.

j'ai essayé sur le body en remplaçant right et left par des % mais en cas de redimensionnement de la page la bordure se retrouve soit trop loin soit trop près disparait sous le corps de la page.

body {

font-size: 68%;
background:url(img/REEL_env_img_footer_1_1313510375.jpg) repeat-y right,
 url(img/REEL_env_img_footer2.jpg)  repeat-y left; }


}

J'ai essayé sur ma div wrapper mais l'image est donc à l'intérieur du corps de page

 .wrapper {

	width: 100%;

	max-width: 1100px;

	border: 0 solid rgba(0,0,0,.46);

	border-width: 0 8px; 

	margin: 0 auto;

        background:url(img/REEL_env_img_footer3.png) repeat-y right,
        url(img/REEL_env_img_footer2.jpg)  repeat-y left;

	-moz-box-shadow: 0 0 12px 2px rgba(0,0,0,.2);

       -webkit-box-shadow: 0 0 12px 2px rgba(0,0,0,.2); box-shadow: 0 0 12px 2px rgba(0,0,0,.2);

}
} 

Pouvez-vous m'aider?

merci yan

Modifié 23 Août 2011 par truitas

[jmi]

En ajoutant un padding right sur la classe .wrapper puis en faisant de même pour la gauche avec un div à l'intérieur du div.wrapper (avec un padding-left ) cela devrait faire l'affaire.

[Clair de Lune]

je veux placer une image répétée en bordure extérieure de ma page gauche et droite.

Je crois que tu ne peux pas mettre 2 images de fond sur le même bloc. La solution est de mettre ta première image sur body (à gauche par exemple), et la seconde (à droite) sur un bloc sans marges ni padding qui sera immédiatement enfant de body. Tu pourrais même essayer la première image sur html et la seconde sur body (?)

[truitas]

Je crois que tu ne peux pas mettre 2 images de fond sur le même bloc. La solution est de mettre ta première image sur body (à gauche par exemple), et la seconde (à droite) sur un bloc sans marges ni padding qui sera immédiatement enfant de body. Tu pourrais même essayer la première image sur html et la seconde sur body (?)

merci pour vos réponses, ca a avancé grâce aux idées que vous m'avez données, c'est bien positionné après je ne sais pas si c'est très juste, qu' en pensez-vous?:

a l'intérieur de ma div content située dans la div wrapper j'ai ajouté:

<aside class="decodroit">
 <section class="decodroit"> 
    </section>
</aside>
<aside class="decogauche">
    <section class="decogauche"> 
    </section>
</aside>

mon CSS

.content .decodroit {
background:url(img/bg1.png) repeat-y;
right:-25%;
height:100%;

	}
.content .decogauche {
background:url(img/bg1.png) repeat-y;
	height: 100%;
	left:-12.7%;
	}

Modifié 24 Août 2011 par truitas

[Tomyweb]

Ton problème est que tu met deux images a la fois. tu peux donc, soit utilisez joindre les deux images en une seule, soit utiliser les deux images en les faisant flotter l'une a gauche, l'autre a droite