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 CSS Foundations CSS Gradients Transparent Gradients

Posted by anotherdude
anotherdude
7,053 Points

Example not working in newest Chrome Canary (without resizing window)

If I make a preview of the finished example in the latest Chrome Canary (Version 40.0.2184.0 canary (64-bit)), the image does not show up behind the gradient (to transparent), with the prefixes set?

Could someone tell me how this example works in the new, un-prefixed syntax?

Thanks :)

5 Answers

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi,

Wouldn't you just delete the prefix.

anotherdude
anotherdude
7,053 Points
anotherdude
anotherdude
7,053 Points

Hmm, not working if I take away the prefix ... guess you need to put the "new" syntax ... which I can't find

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Can you post your css for the gradient please.

anotherdude
anotherdude
7,053 Points
anotherdude
anotherdude
7,053 Points 
html {
    height: 100%
}

body {
    background: -webkit-linear-gradient(hsl(195,51%,44%), rgba(255,255,255,0) 75%), url('bg.jpg');
    background: -moz-linear-gradient(hsl(195,51%,44%), rgba(255,255,255,0) 75%), url('bg.jpg');
    background: -ms-linear-gradient(hsl(195,51%,44%), rgba(255,255,255,0) 75%), url('bg.jpg');
    background: -o-linear-gradient(hsl(195,51%,44%), rgba(255,255,255,0) 75%), url('bg.jpg');
    background-size: cover;
}

Hmm, strange: I just noticed, when I resize the window, the background-image shows as expected, but when I just open the index.html directly in Chrome Canary, it doesn't?

Could this be a local refresh-issue?

anotherdude
anotherdude
7,053 Points

as soon as the page is resized, it shows correctly, but after a refresh, it just shows the gradient, without the image ...

anotherdude
anotherdude
7,053 Points

Hi Wayne, It is a Chrome-Canary-only "problem", as I mentioned in the original post (the code works fine on my Mac in Safari, Chrome and FF). I just wondered if it would work in Chrome Canary with the "new", unprefixed CSS, and I wondered how the "new" unprefixed code would have to be written ...

Altamir Coelho
Altamir Coelho
1,088 Points
Altamir Coelho
Altamir Coelho
1,088 Points

Any closure on this topic? I'm facing the same issue with Chrome Canary also CSS related. It works on every browser but Canary.