Adding an full length image border

HTML & CSS
1

Hi, I am trying to add an image border (full length that doesn’t leave any gaps to the right or left sides) to the bottom of the .headerclass or to the top of the div.wrap.contentclass and another border to the bottom of div.wrap.contentclass or to the top of #containerfooter. I have attempted it but it is not working. I added the border to the top and bottom of div.wrap.contentclass but it is not positioning right to the edge of content background on the top and it doesn’t expand full to the left and right. You can see it on my site.

Here is my site http://statecollegemoments.com/ and this is what I have in the CSS file for it

div.wrap.contentclass{
border: 50px solid;
border-image: url("http://statecollegemoments.com/wp-content/uploads/2015/04/453735.png") 100% 0 100% 0 repeat;
}

what am I doing wrong here… ?

2

You’re currently doing a top/right/bottom/left border all 50px. As a result, it’s 50px space on each side.

Just change that to border-top and I think that does what you want? Hard to follow - allergy medicine making me fuzzy.

1 Like
3

As far as I can tell, the image is going right up to the edge at top, but the image itself is not 50px. The height of the image is 67px, and the height of the decorative ribbon is only 27px, so you get a 40px gap there.

You don’t see that gap at the bottom because the decorative ribbon is at the bottom of the image.

I would say the solution is to crop the image.

1 Like
4

You realize that the border-image property does not work on IE < 11.

5

Thank you Ryan yes that helped to get those gaps removed… I am very thick headed… allergy medicine or not, you are awesome!

6

Thank you ronpat…are there any alternatives? is there anyways to make it all browser compatible ? are image borders not a common practice?

7

Yes…you are so right! Thank you so much…I fixed it now…

8

Just use a background-image and place accordingly. That’s the best option.

9

Can you use a background image on another background image? My div.wrap.contentclass has a background image already…

10

Using images on borders is not uncommon. However the border-image property is new CSS and is not compatible with older browsers. The background-image property, as mentioned by @RyanReese, is the most universal method of implementing background images, including images around the border at this time.

Any time you use bleeding edge code, you must expect limited browser compatibility. You can check out browser compatibility here: http://caniuse.com/

2 Likes
11

You can assign several images to one background.

1 Like
12

You’re welcome! Glad you solved the problem. What made me it easy for me to see the problem was Chrome’s built-in developer tools. You right click on a website, and select “Inspect Element” from the pop-up menu. Then you get to see exactly what properties and values are actually applied.

I’m pretty sure other browsers have something similar, if not built-in, then as a plugin. Highly recommended to avoid tearing your hair out! :smile:

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.