Julisch Julisch - 16 days ago 7
CSS Question

No CSS background gradients with Cordova

Somehow, I'm not able to render a background gradient in my Cordova project.

background: #f5a953;
background: -moz-linear-gradient(top, #f5a953 0%, #fde1b2 49%, #f5a953 100%);
background: -webkit-linear-gradient(top, #f5a953 0%,#fde1b2 49%,#f5a953 100%);
background: linear-gradient(to bottom, #f5a953 0%,#fde1b2 49%,#f5a953 100%);


Gets me an empty plain white background on my mobile device.


  • Changing
    background
    to
    background-image
    has no effect.

  • Changing
    background
    to
    background-color
    at least makes the background be colored. But still no gradient. (That's likely to be the effect of the first line.)



How can I make the background of a Cordova project show a gradient?

EDIT:

I have now created a simple test project with
cordova create test
and then changed the css background to the following:

background-color: #fde1b2;
background-image: -moz-radial-gradient(center, ellipse cover, #fde1b2 0%, #f5a953 100%);
background-image: -webkit-radial-gradient(center, ellipse cover, #fde1b2 0%,#f5a953 100%);
background-image: radial-gradient(ellipse at center, #fde1b2 0%,#f5a953 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fde1b2', endColorstr='#f5a953',GradientType=1 );


chrome_desktop_view (correct)
chrome_desktop_view (correct)

chrome_mobile_view (correct)
chrome_mobile_view (correct)

galaxy_s6 Android 6.0.1 (wrong!)
galaxy_s6 (wrong!)

Answer

I solved the problem by assigning the background gradient to a container div instead of the whole body.

It seems like Chrome doesn't show background gradients that are assigned to the <body> tag.

So I created a simple container div for which chrome bizarrely showed the background gradient.

HTML:

<body>
    <div id="container">
        ...
    </div>
</body>

CSS:

body {
    (nothing about the background)
}

div#container {
    background-color: #fde1b2;
    background-image: -moz-radial-gradient(center, ellipse cover, #fde1b2 0%, #f5a953 100%);
    background-image: -webkit-radial-gradient(center, ellipse cover, #fde1b2 0%,#f5a953 100%);
    background-image: radial-gradient(ellipse at center, #fde1b2 0%,#f5a953 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fde1b2', endColorstr='#f5a953',GradientType=1 );
}