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;
}

Answer 1

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.)