CODEWITHSUNDEEP
cssjquery-mobile
DrLudwig3
DrLudwig3

Reputation: 421

CSS: Android Web App: Color gradient issue

I am developing an Application with jQuery Mobile and Phonegap. I want to have a color gradient from #3c3c3c (grey) to #000000 (black) in the background but when I use this code

background:  -webkit-linear-gradient(top, #3c3c3c, #000000);

you can see just a few big bars with different grey shades. So there is no linear gradient. Also you are able to see some green and some violet bars.

  - Sorry as a new user I am not able to insert a Screenshot -

I also tried to instead insert a background image which shows a color gradient but this also looks as described above (we have also tried to maximize the color-depth of the picture but this also did not change the result).

Is it possible that the device is not able to display enough colors for a linear gradient? Is there another possibility for creating a linear gradient?

Any help is greatly appreciated!

I am testing with Galaxy Tab GT-P1000 Firmware-Version 2.2

Upvotes: 1

Views: 3861

Answers (2)

Clarence Liu
Clarence Liu

Reputation: 4019

To cover all your bases:

        background-image: -webkit-gradient(linear, left top, left bottom, from( #3c3c3c), to( #000000)) !important; /* Saf4+, Chrome */
        background-image: -webkit-linear-gradient(#3c3c3c, #000000) !important; /* Chrome 10+, Saf5.1+ */
        background-image:    -moz-linear-gradient(#3c3c3c, #000000) !important; /* FF3.6 */
        background-image:     -ms-linear-gradient(#3c3c3c, #000000) !important; /* IE10 */
        background-image:      -o-linear-gradient(#3c3c3c, #000000) !important; /* Opera 11.10+ */
        background-image:         linear-gradient(#3c3c3c, #000000) !important;

Drop the !important if you don't need it, I use it to override some default jQM styles that's why and make sure you have background-clip: border-box; (which is default)

Upvotes: 3

sandeep
sandeep

Reputation: 92793

May be you have to write like this:

background:  -webkit-linear-gradient(top, #3c3c3c 0%, #000000 100%);

Upvotes: 0

Related Questions