3

I am stuck with borders on my website. I want to put an image at the top of my vertical menu, one at the bottom and a background for the middle but that doesn't work.

This is my code:

.border-image {
border: solid transparent 10px; //I tried with and without this line
border-top-image: url(/pictures/menu_top.png) 10 round round;
border-bottom-image: url(/pictures/menu_bottom.png) 10 round round;
}
#menu_left {
background-image: url(/pictures/menu_middle.png);
background-repeat:repeat-y;
}

I only have the middle image but not the top/bottom. Firefox gives me:

Property « border-bottom-image » unknow. Property « border-top-image » unknow.

Any idea what I'm doing wrong?

Edit: This works with FF, Chorme and Opera but not IE9.

border-color:transparent; border-width:45px 10px 48px 10px;
-moz-border-image:url("../pictures/left_menu_full.png") 45 9 48 9 stretch ;
-webkit-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat;
-o-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;
-ms-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;
border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;
atjn
  • 467
  • 5
  • 15
remyremy
  • 3,548
  • 3
  • 39
  • 56

3 Answers3

3

As in the article you mentioned, you still have to use the -moz prefix for firefox.

-webkit for Webkit browsers like Safari and Chrome -o for Opera and sometimes… -ms for Microsoft, although in this case border-image is just not supported in IE9 and below.

kojiro
  • 74,557
  • 19
  • 143
  • 201
  • Thanks both ! After some changes I managed to have something: `border-color:transparent; border-width:45px 10px 48px 10px; -moz-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ; -webkit-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ; border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;` It works on FF and Chrome but not IE 9 and Opera. Any tryck for that? – remyremy Oct 22 '11 at 14:35
  • 1
    @remyremy see edits. Unfortunately border-image is just not supported in IE, so you'll need to find an alternative in that case. – kojiro Oct 22 '11 at 15:57
1

Also think of using -webkit to get Safari and Google Chrome working.

atjn
  • 467
  • 5
  • 15
Max Allan
  • 640
  • 5
  • 18
0

why don't you use 3 divs instead? using border for background is kinda weirdo method.

I would use 

<div id="background-top"></div>
<div id="menu"></div>
<div id="backgroud-bottom"></div>

and then define backgrounds for them...

sonia
  • 317
  • 2
  • 15
  • For adding an image to the top and the bottom of an element, border background is entirely appropriate. Calling a solution *weirdo* isn't. – kojiro Oct 22 '11 at 14:15
  • 2
    well, using div's is less problematic... Usually designers use using div's for such tasks, or in other words - I haven't seen border method used for adding backgrounds. Why so short if I tried to help? – sonia Oct 22 '11 at 14:32
  • Sorry to be short. It's not personal, but your response doesn't answer the O.P.'s question. It does pose an alternative approach, but the only reason for avoiding his stated approach is that it's *weirdo*. It would improve this response to write it so that it describes legitimate reasons to avoid the border-image approach. – kojiro Oct 22 '11 at 15:55
  • 3
    Since border image is part of the CSS3 spec, it hardly classifies it as a weirdo method anyway. – Rob Oct 22 '11 at 16:38