dimanche 26 juin 2016

How can I properly make this into an image border?


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: Image of the border I found on the web

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>

JSFiddle

So, I need some tips on fixing this. The results should turn out something like this (Not exactly, similarly):

Similarly, the border should look like this

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