Bonjour
Je m'essaye à quelques fonctionnalités css3 et je rencontre un soucis avec le background multiple. Tous les exemple/tuto/topic que j'ai pu trouver ont toujours la propriété no-repeat, je n'ai pas trouvé un exemple similaire au mien
Le truc, c'est tout bête, je veux un contenu avec son image de fond, le backgroung a donc une image top, sans repeat, un bottom sans repeat et un middle avec un repeat-y pour s'adapter à la longueur du contenu.
J'ai essayé un peu toute les positions possible (top en left top, tout en center top...), le résultat est toujours identique, le top apparait nickel, le middle aussi avec son repeat et pas de bottom O_o
Si je vire le repeat sur le middle: le top apparait bien, le middle apparait bien une fois et le bottom apparait bien aussi tout en bas de la page. Evidemment le contenu étant assez long, j'ai un gros trou de background puisque le middle n'est pas repeté
voici le code:
Je ne comprend vraiment pas le soucis, ça me rend chèvre
merci de votre aide
Modifié par shad35 (06 May 2012 - 11:33)
Je m'essaye à quelques fonctionnalités css3 et je rencontre un soucis avec le background multiple. Tous les exemple/tuto/topic que j'ai pu trouver ont toujours la propriété no-repeat, je n'ai pas trouvé un exemple similaire au mien
Le truc, c'est tout bête, je veux un contenu avec son image de fond, le backgroung a donc une image top, sans repeat, un bottom sans repeat et un middle avec un repeat-y pour s'adapter à la longueur du contenu.
J'ai essayé un peu toute les positions possible (top en left top, tout en center top...), le résultat est toujours identique, le top apparait nickel, le middle aussi avec son repeat et pas de bottom O_o
Si je vire le repeat sur le middle: le top apparait bien, le middle apparait bien une fois et le bottom apparait bien aussi tout en bas de la page. Evidemment le contenu étant assez long, j'ai un gros trou de background puisque le middle n'est pas repeté
voici le code:
.profil {
display:inline-block;
width:1060px;
background:url(images2/fond_bloc_top-profil.png) no-repeat left top,
url(images2/fond_bloc_middle-profil.png) repeat-y center top,
url(images2/fond_bloc_bottom-profil.png) no-repeat right bottom;
margin:10px;
padding:20px;
}
<article class="profil">
<p>et blablabla et blablabla </p>
</article>
Je ne comprend vraiment pas le soucis, ça me rend chèvre
merci de votre aide
Modifié par shad35 (06 May 2012 - 11:33)