Border-image: url(); is not working

  • Unknown's avatar
    ladysawen · Member ·

    Hello,

    I have a question, I cannot find the answer, maybe you can help me.
    I would like to add an image as a border on a div .container

    I don’t know why but everything works fine when I edit the css on Firebug but if I edit my css Stylesheet it’s not working.

    The image-border property is not working or my syntax is wrong.
    I have also tried with another image and also with the prefix -moz-border-image:

    Here is my code

    .container {
    background: url("http://ladysawen.files.wordpress.com/2014/04/concrete_wall_2_brown.png") repeat scroll 0 0 rgba(0, 0, 0, 0.3);
    border-image: url("http://ladysawen.files.wordpress.com/2014/07/border_brown.png") 180 125 170 280 stretch;
    /*border-radius: 15px;*/
    border-style: solid;
	  border-width: 50px;
    box-shadow: 0 0 15px #000;
    margin: 0 auto 30px;
    max-width: 1140px;
    padding-bottom: 10px;
    width: 100%;
}

    I have defined a width and a style for my border.

    If I reopen firebug it says: 

    .container {
    background: url("http://ladysawen.files.wordpress.com/2014/04/concrete_wall_2_brown.png") repeat scroll 0 0 rgba(0, 0, 0, 0.3);
    border-image: none 180 125 170 280;
    border-style: solid;
    border-width: 50px;
    box-shadow: 0 0 15px #000;
    margin: 0 auto 30px;
    max-width: 1140px;
    padding-bottom: 10px;
    width: 100%;
}

    I don’t know where I am wrong.
    Thanks for any help.
    PS: my blog is not yet public as it’s unfinished.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, can you explain what you are wanting to accomplish with the image? The image you have specified for a border is 900px x 600px, which I would think would be way too large for a border image.

  • Unknown's avatar
    thesacredpath · Member ·

    I took a closer look at your CSS and your site and think I know what you are wanting to accomplish. Give the following a try and see if this gets you what you want as far as the border images and then we can work from there. I tried adding your background image, but it ends up hiding the border images.

    .container {
    border-image: url("http://ladysawen.files.wordpress.com/2014/07/border_brown.png");
    border-image-width: 50px;
    -webkit-border-image; url("http://ladysawen.files.wordpress.com/2014/07/border_brown.png");
    -webkit-border-width: 50px;
    -o-border-image: url("http://ladysawen.files.wordpress.com/2014/07/border_brown.png");
    -o-border-width: 50px;
}
  • Unknown's avatar
    ladysawen · Member ·

    Thank you very much for your answer.

    I’ll take a new approach, I want to see if I can apply a simple border image to .container and then I’ll try the one I wanted ^^

    I have change the border image to something basic and clean (http://ladysawen.files.wordpress.com/2014/07/simple.png)

    I tried the code you provided but no luck. I know that I need to specify the border width and type (solid) and a border-image cannot be applied to a table (I don’t think .container is a table though

    I came up with the following: 

    .container {
	background: url('http://ladysawen.files.wordpress.com/2014/04/concrete_wall_2_brown.png') repeat scroll 0 0 rgba(0,0,0,0.3);
    border-image: url("http://ladysawen.files.wordpress.com/2014/07/simple.png");
    border-style: solid;
    border-width: 50px;
}

    The weirdest thing is that my code is working on firebug (screenshot)
    http://ladysawen.files.wordpress.com/2014/07/border_simple_screen.jpg?w=829

    It’s like the code refuses the property border-image:
    To me it’s a mystery but I am bad with css :)

    I don’t want to bother you too much with that so if it’s not possible it’s ok ^^

    Thank you!

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, did you have any luck with your code for your border? I’m not seeing a border right now on your site.

  • Unknown's avatar
    ladysawen · Member ·

    Hello again

    Sorry for the late reply I was on vacation

    I have spent my last weekend trying to sort this out but I am not getting anywhere.

    The code is overwriting my css only for border-image: url (‘image.png’) ;
    I have tried everything but I am missing something.
    The problem is I don’t know where I am wrong unfortunately I am not an expert :)

    I tried to change the syntax I have tried a shorthand property…

    div.container.hfeed {
	border-image-source: ;
	border-image: ;
	-webkit-border-image: ;
	background: url('//ladysawen.files.wordpress.com/2014/08/concrete_wall_3_brown.png') repeat scroll 0 0 rgba(0,0,0,0.3);
	border-image-outset: 10px 11px 12px;
	border-image-slice: 25% 30% 30% 25%;
	border-image-width: 10px 20px 12px 15px;
	border-style: solid;
	border-width: 10px;
	border-radius: 35px;
	box-shadow: 0 0 15px #000;
	display: block;
	margin: 0 auto;
	max-width: 1140px;
	width: 100%;
}

    The css removed my links to the image automatically when I clicked on Save.

    Thanks a lot for trying to help me!

  • Unknown's avatar
    ladysawen · Member ·

    Hello thesacredpath

    There has been some new development with my case
    .
    Actually I have spent so much time trying to find out what was wrong with my code that I just gave up.

    Yesterday, I was trying to add a cursor image to my blog.
    The exact same thing happened, the code was overwriting my CSS.

    Basically, everything that calls an URL image does not work at all except for background images.

    You can try if you want, but there is no way to make a cursor image or a border image work with the template.

    I thing something is no quite right with this template, do you mind having a look please.
    My options are very limited.

    Thank you very much.

  • Unknown's avatar
    thesacredpath · Member ·

    What happens when you add the cursor image? What is the code you are trying to use?

  • Unknown's avatar
    ladysawen · Member ·

    Basically the code removes the url. Here is the code I am typing in the my css: 

    a:hover {
    cursor: url("http://ladysawen.files.wordpress.com/2014/09/cursor.png"), auto;
}

    Once I save the css, here is what I see in the code: 

    a:hover {
	cursor: auto;
}
  • Unknown's avatar
    thesacredpath · Member ·

    Heh, there is an inconsistency in specifying URLs in CSS 3. For the cursor property, you do not surround the URL in quote marks. I’ve added the CSS you gave above to your custom CSS, minus the quote marks, and it saved and is active on your site right now. I put it right under your existing a:hover rule. You can combine and clean things up.

    a:hover {
    cursor: url(http://ladysawen.files.wordpress.com/2014/09/cursor.png), auto;
}
  • Unknown's avatar
    ladysawen · Member ·

    Thank you very much thesacredpath :)

    I am afraid it’s not working though. The code is back to: 

    a:hover {
	cursor: auto;
}

    Is it working on your side?

  • Unknown's avatar
    thesacredpath · Member ·

    [surprised look on @thesacredpath’s face]

    It was working for me and it appeared to save just fine. I’m checking into this with our team. The only thing I can think of is that the URL cursor property is filtered out for some reason. I’ll be back with what I find out just as soon as I can.

  • Unknown's avatar
    thesacredpath · Member ·

    I checked with our team and unfortunately our CSS editor doesn’t support modifying the cursor that way. Since it’s not a very common request this isn’t something we’re likely to add support for in the future, but I’ve made a note of it so our developers know there’s at least one request to add the feature. Sorry about that!

  • Unknown's avatar
    thesacredpath · Member ·

    I’ll add that you have run into two very rare cases and because of the rarity, border image and cursor image won’t get updated in the near future, but I’ve put in a request for both to be reviewed and considered the next time the CSS editor is worked on.

  • Unknown's avatar
    ladysawen · Member ·

    To be fair, it is reassuring to know that my code was not that wrong after all. I have made tons of research and could not figure out the reason.

    It all good I can live with that ;)

    Thank you for your support and the follow up on this.

    I am really grateful for all you did. Hopefully these changes will be considered in the near future, but if not, it,s alright, It’s not that important ^^

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome, and let’s keep our fingers crossed on getting them added, but I’m making no promises.

  • Unknown's avatar
    thesacredpath · Member ·

    @ladysawen, one other thing I was noticing on border image is that it wasn’t supported at all until Internet Explorer 11. Even though Chrome and Firefox have taken a great bit of IE’s market share, there are still a good number of people using IE 9 and 10.

  • The topic ‘Border-image: url(); is not working’ is closed to new replies.