CODEWITHSUNDEEP
htmlcssborder-image
Ali Bdeir
Ali Bdeir

Reputation: 4375

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.

Upvotes: 0

Views: 860

Answers (1)

Sunny Patel
Sunny Patel

Reputation: 8077

The problem is the image you're using for the border. The image that you're using is trying to be sliced up into each section of the border. border-image is not designed to take an image and line it up across the perimeter; it's designed to be split up into 9 sections (think tic-tac-toe board) where the center is your div area.

Sliced Image

Now each slice of the image is trying to be applied to your respective borders, where the sides can be repeated, as in your case. CSS-Tricks has a nice page about this.

One way to possibly fix this, is to edit the image you want on your own, and set up your own borders via. copy-paste and rotation. This way you can slice out the appropriate sections when using it in CSS.

Upvotes: 1

Related Questions