Since I'm not sure if this programmatic-wise or photo edit-wise, I'm posting this here. I apologize if I had to post this somewhere else.
Anyways, I'm trying to use the border-image
property to make a nice border using this image:
But it's not really working out with me. I'm getting weird appearences. Here's my code:
#div{
-webkit-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Safari 3.1-5 */
-o-border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat; /* Opera 11-12.1 */
border-image: url("http://i.imgur.com/BL9Mb7a.gif") 30 repeat;
border-width: 100px;
border-style: solid;
height: 200px;
width: 100px;
}
<body>
<div id="div">Hello world!!!</div>
</body>
So, I need some tips on fixing this. The results should turn out something like this (Not exactly, similarly):
Note that the width won't be defined. Could be extended
Pretty much, It should be repeating the middle part of the image and leaving the edges. But I'm getting a result of a newborn's drawings. So, is there any tips or solutions for this?? I've done research but none include my desires.
Aucun commentaire:
Enregistrer un commentaire