How to change a border color to an actual image

HTML & CSS
1

I am working on a website for a game guild using a WP theme that currently has a color designating for the border. I would like to change this to an image that I created. There is a top and bottom border and when I take out the code for the color and add the code for an image, I lose the bottom completely and the top does not look right.

Here is the current code in CSS

#content .container {
	border-top:10px solid #bdf1e9;
	border-bottom:10px solid #bdf1e9;
}

I have tried messing with the index.css page that is included with the theme and nothing changes. It has to be on the styles.css page. Any help would be greatly appreciated. The image is 10px high and repeats. If I need to make it one long image, I can do that but was hoping to keep the image to a small size.

2

Nevermind did some more research and found this and it works for what I am attempting to achieve.

.pattern {
border: 30px solid transparent;
border-image: url(http://docs.webplatform.org/w/images/d/d8/border-image.png) 30 repeat;
}

3

I ran into another problem with adding an image instead of a border color for the sidebar widget area. The image is the same as the container image just saved as divider_sidebar.png. The code is

Content .widget {
border-bottom: 10px solid transparent;
border-image: url(images/divider_sidebar.png) 10 repeat;
}

The image is 10px in height. I can’t change repeat to repeat-x or repeat-y as the image completely disappears. I also get the image leaking through underneath the content container border top. If I take the color and make it as much as 50px I don’t have leakage from the top so I don’t know why the image is leaking through.

This is the original code

Content .widget {
border-bottom: 10px solid #09F;}

4

Hi, cgacfox.

Would it be possible to post a link to the page?

5

Actually, I am working on it locally as I don’t want to mess up the live site. However the live site is http://thepsijicorder.com. That part of the page is controlled by the style.css page. This is WP. I couldn’t find or adjust anything on the theme’s index.css page or other css pages.

6

I can’t change repeat to repeat-x or repeat-y as the image completely disappears.
i dont think you are grasping how border-image works. It is NOT at all like background-image and you don’t have repeat.

This article may clear things up for you.

7

Thank you. I will check this out and see if this is what I am trying to accomplish.

8

I read through the article and now I am confused. This is using 4 separate images to create the border and there is a repeat for all 4 images.

.border-image-example {  -webkit-border-image: url(border-image.jpg) 45 20 45 30 repeat;  -moz-border-image: url(border-image.jpg) 45 20 45 30 repeat;  border-image: url(border-image.jpg) 45 20 45 30 repeat;}

So how am I supposed to take 1 image that is 10px in height and 272 px in width (the width of the sidebar) and slice into 4 separate images and not have it repeat? Sorry that I am slow in understanding this.

9

First thing you must do is clear your head of any ‘bad habbits’ :wink:

border-image is neither the border property nor the background(background-image) property. it’s imperative you take those out of your mind when thinking about border image.

Ok now…

What borer image is: a NINE-WAY SLICE of ONE IMAGE, which is then imposed over the corners, the borders and the main bg of an element. you have control over the 4 border slices (not the corner or the center one) and you can stretch those , repeat those or round to fit their size into the border. so essentially you end up having an AWESOME amount of control based on 4 criteria:

  1. your original image
  2. your border widths
  3. your slicing values ( those the 4 numbers you see in the property)
  4. your stretch/repeat/round setting.

It’s really hard to give advice without seeing EVERYTHING (image/code/ intended final look)…
butr here is an example of a NON REPEATING, NO CORNERS, BORDER IMAGE CODE based on this image:http://docs.webplatform.org/w/images/d/d8/border-image.png

.nav { border-image: url(http://docs.webplatform.org/w/images/d/d8/border-image.png
) 30 0 0 0 stretch; border-top:30px solid; width: 90px; }

note that for the image not to be distorted ( since I used stretch) or repeated (if you use repeat) the container MUST be the same width as your container.

Also I have been thinking…. if all you want is a non repeating image, of a specific size, at the top of your TRANSPARENT container… why not use PADDING-TOP and BACKGROUND-IMAGE ?