CSS3 Pie background image doesnt show

Question

I am using CSS3 pie and am calling it by attached js files just before the head tag.

For some reason my background image inst appearing. I have tried the standard adding z-index and position relative fixes but it doesn't show. Any help guidance appreciated.

Below is the css.

.linkButton {
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #dc5c00;
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-gradient(linear, 0% 0% 0% 100% from(#e36000), to(#c85400));
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -webkit-linear-gradient(top, #e36000, #c85400);
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -moz-linear-gradient(top, #e36000, #c85400);
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -ms-linear-gradient(top, #e36000, #c85400);
  background: url('../Images/linkButtonBg.png') 100% 9px no-repeat, -o-linear-gradient(top, #e36000, #c85400);
  -pie-background: url('../Images/linkButtonBg.png') 100% 9px no-repeat #000;
  padding: 10px 10px 10px 11px;
  display: inline-block;
  color: #ffffff;
  font-weight: bold;
  box-shadow: inset 0 1px 0 0 #ff801e, 0 0 1px 1px #ffffff, 0 0 1px 1px #ffffff;
  border: 1px solid #c85400;
  text-shadow: #813700 2px 2px 1px;
  line-height: 12px;
  margin-bottom: 7px;
  width: 326px;
  display: block!important;
  position:relative;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;`enter code here`
  z-index:1;
}

Thank you for the comment. It already was the last tag before the closing body tag — buffaloj, May 30 '12 at 13:15

score 3 · Accepted Answer · answered May 29 '12 at 14:32

3

First of all you don't need -pie-background for plain old image + background color.

If you do want to use -pie remember that paths are relative to html not css.

(I assume that you've set up mime-type etc and pie works for you in different cases.)

answered May 29 '12 at 14:32

Litek

4,888
1
24
28

Thank you, was relative to CSS not HTML. This resolved my issue. – buffaloj May 30 '12 at 13:11

score 0 · Answer 2 · answered May 29 '12 at 11:55

0

.linkButton{
    behavior: url(PIE.htc);
}

Also, try adding a .index file with the following content in the same location as the PIE.htc file:

more info http://css3pie.com/

http://css3pie.com/documentation/

answered May 29 '12 at 11:55

Rohit Azad Malik

31,410
17
69
97

Thank you for the comment. Am using the pie js file so dont need to add that to every class – buffaloj May 30 '12 at 13:15

score 0 · Answer 3 · edited May 29 '12 at 13:21

0

Try linking it without dots and slash like this:

-pie-background: url('Images/linkButtonBg.png') 100% 9px no-repeat #000;

edited May 29 '12 at 13:21

Treffynnon

21,365
6
65
98

answered May 29 '12 at 13:16

ragnaut

11
1

CSS3 Pie background image doesnt show

3 Answers3