CSS3 PIE Forums
http://css3pie.com/forum/

background linear gradients make background go away
http://css3pie.com/forum/viewtopic.php?f=3&t=31
Page 1 of 1

Author:  tack [ Mon Jul 19, 2010 6:44 pm ]
Post subject:  background linear gradients make background go away

I'm using overloaded background-image shortform to do background images and a linear gradient because otherwise it breaks everywhere. Like so:

Code:
article.mainContent{
   position:relative;
   z-index:5;
   display:block;
   min-height:1080px;
   -moz-box-shadow: 5px 5px 25px #000;
   -webkit-box-shadow: 5px 5px 25px #000;
   box-shadow: 5px 5px 25px #000;
}

article.mainContent{
   background-image: url('/images/bg_mainContent_dots.png'), -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(188,188,188)));
   background-position: left top, left top;
   background-repeat: repeat-y, repeat;
}

article.mainContent{
   background-image: url('/images/bg_mainContent_dots.png'), -moz-linear-gradient(center bottom,rgb(255,255,255) 0%,rgb(188,188,188) 100%);
}

article.mainContent{
   background-image: url('/images/bg_mainContent_dots.png'), linear-gradient(left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(188,188,188)));
   behavior: url(/css/PIE.htc);
}


My box-shadowy bits are working but the linear gradient/background is borking. I get a transparent background with the VML object for box-shadow showing through.

Thoughts? I'm thinking I've got a syntactical quirk that was unanticipated. Merging the overloaded .mainContent blocks into one makes no difference. I had PIE in the first block and in an external IE less than 9 file and box-shadow was working in those cases too.

I'm using html5shiv first thing and then these bits, and the shadow's ok so I think html5 article tag is in the dom when the .htc bits do their magic.

Author:  lnrb0b [ Tue Jul 20, 2010 9:00 am ]
Post subject:  Re: background linear gradients make background go away

I think you should be using '-pie-background' not 'background'
If that's not it make sure that the path to your image starts from the page, not from the css file.

Author:  tack [ Tue Jul 20, 2010 12:44 pm ]
Post subject:  Re: background linear gradients make background go away

lnrb0b wrote:
I think you should be using '-pie-background' not 'background'
If that's not it make sure that the path to your image starts from the page, not from the css file.


Duh, -pie-background was it. I'd even read that in the docs and was too tired for it to stick. Thanks.

Author:  lnrb0b [ Thu Jul 22, 2010 10:42 am ]
Post subject:  Re: background linear gradients make background go away

Woo, I helped! :D
Glad it worked!

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/