Utilisation conjointe de background-position et background-repeat

Bonjour à tous!

Je viens solliciter votre aide pour un petit souci qui reste sans solutions depuis quelques temps, malgré mes efforts acharnés!

En fait, j'essaie de mettre en place un bloc de texte sur un site. Le problème de ce bloc, c'est qu'il a deux textures de fond différentes: une première texture en haut qui ne se répète pas, et une seconde qui s'étend à l'infini avec le bloc.

Il y a bien une première solution qui consiste à imbriquer deux divs, de façons à ce que le second contienne la texture du haut et recouvre donc la partie supérieure du premier, qui contient la texture extensible. Le souci, c'est que j'utilise des PNG transparents, et que du coup, ça ne colle pas du tout!

J'ai ensuite pensé à utiliser background-position, pour décaler ma seconde texture. Mais cette propriété n'est pas compatible avec la répétition en Y et ne résout donc pas mon problème.

Bref, je suis bien désemparé face à cette situation, j'espère avoir quelques conseils ici! Merci d'avance!

Hello,

À brute pour poing sans voir une ligne de code et voir ce que tu veux faire, c'est un peu juste. Bien que la compatibilité ne soit pas optimum dans les browsers, as tu lu cette article ?

arrière plan css 3

Bonne soirée

Tout d'abord, merci de ta réponse! Malheureusement, ce qui est proposé dans les pages vers lesquelles tu me renvoies manque bien trop de compatibilité à mon goût.

Mais c'est vrai que mon problème n'est pas très clair, voici une petite image pour vous expliquer tout ça plus précisément.

http://azrelia.fr/store/pb_mini.jpg

Sur l'image du bas, vous voyez le bloc tel qu'il doit apparaitre, avec du texte dessus.

En haut, le seul découpage qui me semble possible pour une image de ce type.
- en vert : la partie supérieur, qui ne peut ni se répéter, ni être étirée, à cause du personnage
- en jaune : la partie centrale, extensible à l'infini pour s'adapter à la longueur du texte
- en bleu : le pied de bloc, qui ne nous intéresse pas vraiment puisqu'il ne pose aucun problème dans le cas présent.

La méthode que j'utilise actuellement pour le placement (sans le pied de bloc):

<div id="corps">   

    <div id="corps_top">   
    Lorem ipsum dolor sit amet, etc...
    </div>

</div>

#corps
{
background: url("img/center.png")  repeat-y;
}

#corps_top
{
background: url("img/top_center.png") no-repeat;
}

Comme vous le voyez, c'est très simple: le bloc corps_top est imbriqué dans le bloc corps. Comme le background de corps_top ne se répète pas, ou verra donc dessous celui de corps, qui se répète à l'infini.

Ce système fonctionnerait très bien avec des jpg rectangulaires, mais il ne fonctionne pas avec des png aux bords arrondis, puisqu'on voit apparaitre les coins de l'image qui se répète sous les bords arrondis de l'image supérieure!

Une solution consisterai donc à décaler le background de corps pour qu'il ne commence qu'après celui de corps_top, mais background-position n'est pas compatible avec le repeat-y.

Voilà donc mon problème! Je suis preneur de toute solution, y compris en ce qui concerne le découpage de l'image et l'organisation des blocs, tout peut changer!

Merci d'avance!

NB: les images n'ont rien à voir avec le site que je suis en train de concevoir, mais je suis un vieux psychotique parano qui n'aime pas montrer des morceaux de ses projets qui sont encore en développement (mais la structure du truc est exactement similaire, bien entendu)
Modifié par Quentin71 (18 Dec 2009 - 00:33)

Bonjour,

J'ai exactement le même problème... As tu trouvé une solution?

Hello,

A brûle-pourpoint, je dirai : "Pourquoi ne pas redécouper tes images de fond autrement ?"

Je m'explique : au lieu d'avoir un haut et un bas, pourquoi ne prendrais-tu pas une image de fond avec uniquement le dégradé, que tu fais répéter sur toute la hauteur.
Puis une seconde image reprenant le visage du personnage, sur fond transparent que tu ajoute comme background dans le coin supérieur gauche de ton second div ?