- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
I have a problem with the following code.
#breadcrumb {
font-size: 11px;
line-height: 26px;
/* font: 11px/26px Helvetica, Arial, sans-serif;*/
background: url('gradients.png') repeat-x 0 -112px #c6c6c6; /* Fallback */
background-image: -webkit-gradient(linear, left top, left bottom, from(#c6c6c6), to(#eaeaea));
background-image: -webkit-linear-gradient(top, #c6c6c6, #eaeaea);
background-image: -moz-linear-gradient(top, #c6c6c6, #eaeaea);
background-image: -o-linear-gradient(top, #c6c6c6, #eaeaea);
background-image: -ms-linear-gradient(top, #c6c6c6, #eaeaea);
background-image: linear-gradient(top, #c6c6c6, #eaeaea);
height: 26px;
}
I have all my gradients in a single imagefile. Mozilla Firefox only displays a grey box.
#breadcrumb {
background: -moz-linear-gradient(center top , #C6C6C6, #EAEAEA) repeat-x scroll 0 -112px #C6C6C6;
font-size: 11px;
height: 26px;
line-height: 26px;
}
I think it’s because the backround-position and -repeat-element are copied. any solutions? :)
Hmm, I’ve never seen a sprite used for a fallback on a background with CSS gradients.
Also, you need to specify ‘background-image’
Background is fine as a shorthand, background-image is not needed. I would try moving #c6c6c6 to the start of the ruleset, as far as I am aware, the color must be declared first when using the background shorthand:
background: #c6c6c6 url('gradients.png') repeat-x 0 -112px; /* Fallback */
Unfortunately no. If I remove the CSS3 gradients and only use the shorthand it works fine in both cases. I’ve tried several ways and the result is always that the background-position and background-repeat also applies to the CSS3 gradients. Like I said before.
Probably the best thing will be not to use any sprites with CSS gradients.