Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dominique Baker
Dominique Baker
6,415 Points

Display linear-gradient in Android Browser 4.3

I checked caniuse.com and see you need to use -webkit- for gradients. I added display: -webkit-linear-gradient under body and -webkit- to my linear-gradients E.g.

body {
  display: -webkit-linear-gradient;
}

  background:
  linear-gradient(cadetblue, transparent 90%),
  linear-gradient(0deg, #fff, transparent),
  -webkit-linear-gradient(cadetblue, transparent 90%),
  -webkit-linear-gradient(0deg, #fff, transparent),
  cadetblue url('../img/burglarBars.jpg') no-repeat center;

Neither the linear-gradients, nor the background colour nor background image display in the browser on my Samsung S3.

3 Answers

Flavio Carvalho
Flavio Carvalho
26,636 Points

Hi Dominique,

I could be wrong, however:

For 1: your curly bracket needs to close after the background properties (I'm seeing the curly bracket close before the background!);

For 2: display: -webkit-linear-gradient isn't right, "-webkit-linear-gradient" is not valid for display;

For 3: and this I'm not quite sure, but you might need to set a different background-image property for each vendor prefix (webkit, moz, o and so on), with your linear-gradients in each one but it's just a thought. So you would have:

body {
background-image: linear-gradient(cadetblue, transparent 90%),
                  linear-gradient(0deg, #fff, transparent);
background-image: -webkit-linear-gradient(cadetblue, transparent 90%),
                  -webkit-linear-gradient(0deg, #fff, transparent);
background: cadetblue url('../img/burglarBars.jpg') no-repeat center;
}

Experiment and let us know if that works :)

Dominique Baker
Dominique Baker
6,415 Points
Dominique Baker
Dominique Baker
6,415 Points

Hi Flavio,

I managed to solve the issue using your advice in the following ways:

  1. I removed the display property in the body element.
  2. You were right about the different properties. I created a new background property for the linear-gradient properties with and without vendor prefixes in the various elements with linear-gradients, instead of having multiple values in one property. I tried the background colour, image etc. on their own, but then I lose the layering effect. I have included the code for the header element as an example.

Thank you!

header {
  background:
  linear-gradient(cadetblue, transparent 90%),
  linear-gradient(0deg, #fff, transparent),
  cadetblue url('../img/burglarBars.jpg') no-repeat center;
  background:
  -webkit-linear-gradient(cadetblue, transparent 90%),
  -webkit-linear-gradient(90deg, #fff, transparent),
  cadetblue url('../img/burglarBars.jpg') no-repeat center;
  background-size: cover;
}
Flavio Carvalho
Flavio Carvalho
26,636 Points
Flavio Carvalho
Flavio Carvalho
26,636 Points

Awesome :)

Two heads do think better than one! Now I know too, thank you for getting back with a working code!