Background-image [truc tout con mais argh!]

Hello,

Comment faire svp pour que le bg-image, qui est un .svg pour sa flexibilité, puisse prendre la taille de son contenant de façon élastique mais pas façon ":cover", c'est à dire que le svg puisse varier en longueur selon le titre ?
J'ai essayé toutes les solutions classiques, en vain.. C'est à n'y rien comprendre.
Serait top merci



Modifié par Snoopasnoop (13 Sep 2016 - 15:34)

Bon ben vais faire d'autrs .svg en fx des titres 100% sur chacun d'eux, mais ça aurait été nickel d'en avoir un en .class pour proprement le mettre partout en mode 4x4.
Je laisse encore un peu, si quelqu'un a une soluce.. si ça se trouve un truc de débutant..
Merci

Snoopasnoop a écrit :

Je laisse encore un peu, si quelqu'un a une soluce.. si ça se trouve un truc de débutant..
Merci

Laisse deux heures à quelqu'un pour voir le sujet et répondre, forcément c'est court.
Ici c'est un forum, beaucoup d'entre nous travaillons.

Un peu de patiente quand même.

Pour ton problème, le truc serait de ...

Désolé, le telephone sonne, a+
Modifié par dann (13 Sep 2016 - 17:40)

Hello,
Est-ce qu'on peut voir l'exemple en ligne stp ?

Salut Dann et Yordi,

Merci pour vos retours,
Dann, très drooole
Pour le reste t'as raison..

Yordi, impossible pour l'instant c'et un site WP en local..

Salut Yordi,

Merci c'est très sympa de ta part, mais je laisse tomber. En fait, c'est à priori un truc que je croyais faisable, que nenne.

Surtout qu'il semble y avoir d'autre alternatives comme:
- .before / .after etc avec du shape en css, pfffff pour moi
- un div en z-index inférieur avec une image - pas en bg, mais passer en absolute ..

Enfin pour mon besoin: les .svg sont tellement légers (500 octets à peine) pour pas plus de 10 titres..

J'ai jeté un oeil là (très bien fichu d'ailleurs): http://www.alsacreations.com/tuto/lire/1390-arriere-plans-css3-background.html,
En tout bon sens, sagirait le plus simplement du monde de mettre background-size: 100% 50px; en vain, le .svg quitte le top left pour se déplacer sans être élastique. J'ai beau essayer toutes les variantes

( Peut-être qu'avec un autre format .jpg/.png.. mais bon. )

Histoire de..

.shape_trpz_pourquoi{
    margin: 0;
    padding: 10px;
    padding-left: 35px;
    color: #ffffff;
    background-image: url("../gfx-shape_trpz_pourquoi.svg");
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100% 50px;
}

Edit: petite suggestion, un petit <hr /> en mise en forme serait pas mal (genre un discret dotted ou dashed en #cccccc)
Modifié par Snoopasnoop (15 Sep 2016 - 13:18)