Background-image-options

[KerryRuddock]

No description provided.

[KerryRuddock]

Hi David,

Unfortunately, a vendor prefix is still requred when using a linear-gradient for the background-image under Chrome Browser Version 56.0.2924.76 Your site is invaluable for me.

.grad1 {
background: gray;
background: -webkit-linear-gradient( left top, #808080, #ffffff );
background: linear-gradient( left top, #808080, #ffffff );
}

[davidhund]

Hi @KerryRuddock — thanks for the kinds words.
However: I don't think you need the -webkit- prefix for Chrome 56.

You can check a test-page here
Both my test Chrome 49 and Mobile Chrome 55 picked up the green gradient.

It should be supported prefixless from 26+

However, I believe there are some issues with Android's UC browser (which has a lot of market share), so I'll look into it.

[KerryRuddock]

David,

I see that your codepen is using background-image which does indeed work.

I am saying that using the shorthand background property is where the -webkit- prefix is
still needed. Running on chrome browser on windows 7.

You can check my codepen here

[davidhund]

You are using a deprecated syntax e.g. 'left top' and 'bottom right'. Replacing this with e.g. 300deg should work… Keywords such as left and top need the to prefix: to left, etc.

[ramtinsoltani]

background-clip needs prefix on Chrome (-webkit-background-clip) otherwise it'll be ignored as invalid property.

[ramtinsoltani]

Check this codepen on Chrome (I've tested it on Chrome 62, Windows 10 64-bit). When the -webkit-background-clip is removed in favor of the unprefixed background-clip, the text will turn into a gradient block.

[davidhund]

@ramtinsoltani — you are correct that background-clip needs a -webkit- prefix in WebKit browsers (and Edge).

However: This only goes for the not-yet-standard text value.

I agree we should probably mention it in background-image-options.md

Would you care to open a PR?

[ramtinsoltani]

@davidhund — I just opened a pull request with the background-clip prefix mentioned in the CSS example.