CODEWITHSUNDEEP
css
Richard
Richard

Reputation: 65510

Combining a gradient and background-image in non-Webkit browsers?

I'm trying to combine a transparent CSS gradient and a background image, and fail gracefully in browsers that don't support the gradient.

I have this CSS, which works fine in Webkit browsers, but seems to be totally ignored by non-Webkit browsers (e.g. Firefox), which display a white background:

body {
  height:100%;
  -webkit-font-smoothing: subpixel-antialiased;
  padding-top: 2%;
  padding-bottom: 2%;
  background: -webkit-gradient(linear, left top, right top,
    from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.4)),
    color-stop(0.03, rgba(0,0,0,0.2)),
    color-stop(0.06, transparent),
    color-stop(0.94, transparent),
    color-stop(0.97, rgba(0,0,0,0.2))),
     url(../img/myimg.jpg) repeat;
}

However, if I set background to:

  background: url(../img/myimg.jpg) repeat;

instead, it works fine in Firefox. Shouldn't Firefox just ignore the -webkit-gradient part of the rule? How can I make this Firefox-friendly?

Upvotes: 1

Views: 167

Answers (3)

Eamon Nerbonne
Eamon Nerbonne

Reputation: 48066

You should try to use the standard, unprefixed linear gradient syntax - this is now quite widely supported: IE10, chrome 26 (current is 27), firefox 16 (current is 20), opera 12.1 (the latest version). To support mobile browsers you'll additionally need the webkit-prefixed version.

Using your example gradient, the standard syntax is...

background: linear-gradient(to left, 
    rgba(0,0,0,0.4), rgba(0,0,0,0.0) 6%, rgba(0,0,0,0.0) 94%, rgba(0,0,0,0.4));

You can see this in a jsfiddle example.

Upvotes: 2

Roman
Roman

Reputation: 6408

Firefox doesn't just ignore "that part" of the rule. Firefox ignores the whole rule when it doesn't recognize a part of it.

This means you can specify several rules and Firefox will pick only those that it understands:

body {
  height:100%;
  -webkit-font-smoothing: subpixel-antialiased;
  padding-top: 2%;
  padding-bottom: 2%;
  background: url(http://lorempixel.com/400/200/) repeat;
  background: -webkit-gradient(linear, left top, right top,
    from(rgba(0,0,0,0.4)), to(rgba(0,0,0,0.4)),
    color-stop(0.03, rgba(0,0,0,0.2)),
    color-stop(0.06, transparent),
    color-stop(0.94, transparent),
    color-stop(0.97, rgba(0,0,0,0.2))),
     url(http://lorempixel.com/400/200/) repeat;
}

fiddle: http://jsfiddle.net/yb5AE/

Firefox understands the first background rule, but not the second. Therefore the first one is used. Webkit understands both and therefore the second one overwrites the first one, because it is declared "later", and so the second one is used.

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157314

If the value is invalid, firefox won't read anything after; here your background is ignored as -webkit is an unknown property value for firefox, so in your example, -webkit is an unknown value for firefox at first so it will skip that and move to next property in that class..Say for example

background: asadsa, url('http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif'); 
/* asadsa is invalid here, so firefox will skip to next property */

Demo

CSS

div {
    background: asadsa, url('http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif');
                ---^---
  /* Invalid Value For Property background */ 
    height: 200px;
    width: 300px;
    border: 1px solid #f00;
}

Upvotes: 1

Related Questions