Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 gradients with fallback

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #34617
    berti
    Participant

    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? :)

    #88407
    chrisburton
    Participant

    Hmm, I’ve never seen a sprite used for a fallback on a background with CSS gradients.

    Also, you need to specify ‘background-image’

    #88425

    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 */
    #88430
    berti
    Participant

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.