0

When I try to use border-image in my website to make our logo appear as the border, the image won't even show up on the page. It doesn't work in any browser that I try and the image is in the same folder. I know for sure that I'm modifying the correct div because when I add border-radius, the borders become rounded. I really have no idea what I am doing wrong, so I would appreciate any help. Here's the div in CSS:

#outer_container {
height: 1495px;
width: 925px;
margin-right: auto;
margin-left: auto;
background-repeat: repeat-x;
background-attachment: fixed;
background-color: #E7EAF5;
border-style: solid;
border-width: 38px 0px 0px;
-moz-border-image: url(logo.gif) 81 0 repeat stretch;
-webkit-border-image: url(logo.gif) 81 0 repeat stretch;
-o-border-image: url(logo.gif) 81 0 repeat stretch;
border-image: url(logo.gif) 81 0 fill repeat stretch;
}
user3361043
  • 361
  • 3
  • 10
  • 23
  • 1
    JSfiddle please. I suspect though that `border-image` does **not** work as you might think it does. – Paulie_D Feb 27 '14 at 15:21
  • 1
    Show us your HTML, please. – Siyah Feb 27 '14 at 15:21
  • I agree with @Paulie_D a fiddle would help but it doesnt look like you are using border image correctly... It doesnt look like you even call a border size – Travis Feb 27 '14 at 15:27
  • @Siyah the HTML is rather large and clunky because I inherited the code from another developer who did everything too quickly. If you need that entire mess of an HTML page, should I add it to comments or edit my post? It will be very long as there's a lot of JS and ASP.NET mixed in. – user3361043 Feb 27 '14 at 15:29
  • 1
    @user3361043 Only the relevant HTML code is necessary. Add the code that refers to the `border-image` and relevant divs. – TylerH Feb 27 '14 at 15:30
  • Create a simple Fiddle that applies to the one div that you need a border image – Travis Feb 27 '14 at 15:30
  • http://css-tricks.com/understanding-border-image/ – Paulie_D Feb 27 '14 at 15:38
  • @Travis what do you mean by border size? I set the width, which is what I thought I needed for border-image to work. I clearly don't understand it too well since it's the first time I'm trying to use it. Also how do I use jsfiddle? – user3361043 Feb 27 '14 at 15:38
  • Here they have a div that has a border of 15px http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image I dont see a border size in your code... JSFiddle is pretty easy to use just go there input your html and your css and click run – Travis Feb 27 '14 at 15:41
  • @Travis thank you for the suggestion. After adding the border size it still doesn't show up. I am trying to figure out jsfiddle now, hopefully it will help. – user3361043 Feb 27 '14 at 15:53
  • Here's a jsfiddle: http://jsfiddle.net/MrLister/4U82n/ – Mr Lister Feb 27 '14 at 15:54
  • @TylerH it is the outer wrapper div that's giving me issues, so there's a good amount of HTML/CSS/JS/ASP.NET in the inner container and other blocks that are just too clunky and will be a pain to read. Should I add it anyway? – user3361043 Feb 27 '14 at 15:55
  • @user3361043 Even if you think it is a lot of code, it's important to paste what you've tried here; if your link disappears, your question is useless as a reference source for other people with the same problem/people who are trying to answer your question. And other people might be able to help you rip out parts that aren't truly relevant, even if you think they are. Just make sure you indent it all properly to have the code function capture it all. – TylerH Feb 27 '14 at 15:58
  • @MrLister Wow the image actually shows up now after I used that fiddle. I am confused because none of the values have changed except your picture is from the web rather than my folder. I am guessing that there's an issue with my image? – user3361043 Feb 27 '14 at 16:08
  • @TylerH See my response to MrLister. Should I still paste the HTML? If so, should it go into my first question or the comments? Is there a way to just attach the file to my post? Sorry for all the questions, I am still figuring stuff out. – user3361043 Feb 27 '14 at 16:09
  • @user3361043 At this point if your question is answered, then I suppose not. It will be less valuable of a question, though. Anyway, it looks like in your code, you haven't really provided a relative or absolute URL--just a filename--for the image. That's probably the reason your image isn't working. See this link for more info: http://stackoverflow.com/questions/940451/using-relative-url-in-css-file-what-location-is-it-relative-to – TylerH Feb 27 '14 at 16:11
  • @TylerH Thank you! After looking at that link I realized that my problem was due to the image not being in the same folder as the CSS. Doh... – user3361043 Feb 27 '14 at 16:18
  • In that case I will provide that as an answer for you/others. – TylerH Feb 27 '14 at 16:20

1 Answers1

-1

As seen here, according to W3 and Alex Rozanski:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

If you think about this, this makes sense, since the CSS file could be added to pages in different directories, so standardizing it to the CSS file means that the URLs will work wherever the Style Sheets are added.

Community
  • 1
  • 1
TylerH
  • 20,799
  • 66
  • 75
  • 101