18041 sujets

Questions générales et questions de débutants

Taille d'une image avec :before

Bonjour.

Je souhaite faire une sorte de post-it avec une épingle.

L'image de l'épingle est un png placé avant le post-it avec :before. Le soucis, c'est que je n'arrive pas à changer la taille de l'épingle.

Voici le petit bout de code...

<style type="text/css">

.post-it {
background-color: #fefabc;
padding: 5px;
font-family: Comic Sans Ms;
font-size: 12pt;
color: #000;
width: 200px;

-moz-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);

box-shadow: 0px 4px 6px #333;

z-index: 0;
}

.post-it:before {
content:url(http://3.bp.blogspot.com/-cxwbwo4qrnE/UfPUDQqUaTI/AAAAAAAAIUg/-IENRv-junE/s320/epingle.png);
position:relative; left:-10px; top: -40px;
width: 50px;

}
</style>


<div class="post-it">
Test de post-it
</div>


Merci de me conseiller.
salut,
tu dois changer son display car il est par défaut à "inline". Un "display:inline-block/block", un float ou une position absolue te permettront de le redimensionner.
Merci, mais ça veut pas Smiley decu .

J'ai pensé changer la taille du png original...mais j'en ai besoin dans d'autres pages et j'ai pas envie d'avoir autant de fichiers "épingle" que de tailles.
Modifié par UncleDid (28 Jul 2013 - 12:13)
Effectivement, l'image est du contenu généré et il n'y a pas moyen de redimensionner l'image avec before. Tu peux passer par un background et background-size.

.post-it:before{
   content:"";
   display:inline-block;
   width:50px;
   height:59px;
   background:url(http://3.bp.blogspot.com/-cxwbwo4qrnE/UfPUDQqUaTI/AAAAAAAAIUg/-IENRv-junE/s320/epingle.png) no-repeat;
   background-size:100%;
}
Sujet clos
Aller à