CSS list not working if in Hex

Question

I am working from this answer here: Use css gradient over background image

background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 59%, rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(59%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 59%,rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;

If I use the above (I change the url) it works as expected. ie I see a list with with a gradient and an image.

However if I change my original code that gave me a nice blue gradient and no image to:

background: -moz-linear-gradient(top,  #6daad3 0%, #396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-linear-gradient(top,  #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -o-linear-gradient(top,  #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: -ms-linear-gradient(top,  #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background: linear-gradient(to bottom,  #6daad3 0%,#396b9e 100%), url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat;
background-size: 80px;

I see the space for the image and firefox debugger see's the url but I dont see the image.

The only difference I see is that I am using Hex in my example.

Any ideas ?

MrWarby.

Working using the following:

/* background: #6daad3; Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-moz-linear-gradient(top,  #6daad3 0%, #396b9e 100%); /* FF3.6+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-gradient(linear, left top, left bottom, color-stop(0%,#6daad3), color-stop(100%,#396b9e)); /* Chrome,Safari4+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-webkit-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* Chrome10+,Safari5.1+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-o-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* Opera 11.10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,-ms-linear-gradient(top,  #6daad3 0%,#396b9e 100%); /* IE10+ */
background: url('http://www.clker.com/cliparts/8/a/3/1/1197107206400036309metalmarious_Laptop.svg.med.png') no-repeat ,linear-gradient(to bottom,  #6daad3 0%,#396b9e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6daad3', endColorstr='#396b9e',GradientType=0 ); /* IE6-8 */


background-size: 80px 80px;

What is the result in the other browsers? – Carlos487 May 19 '14 at 21:41 — Carlos487, May 19 '14 at 21:41

Armel Larcier · Accepted Answer · 2014-05-19T21:58:20.060

From the W3C working draft on css gradients :

Given a color expressed as an rgba() 4-tuple, one can convert this to a premultiplied representation by multiplying the red, green, and blue components by the alpha component...

Hex representation are not mentioned in the document. Maybe not all browsers support Hex values.

Convert your colors to rgba using http://hex2rgba.devoth.com/ or any other tool.

If it doesn't work, then maybe that's just because you're applying opaque colors on top of an image, which is supposed to make it not visible...

[EDIT]

You're indeed actually really very hiding the image with opaque colors here!

The backgrounds are rendered one under the other in the order of css value text... So the image is LAST, thus behind...

You can just convert your colors and add transparency by setting alpha values between 0 and 1 at every color-stop.

Thanks @Armel Larcier . I have changed this and can see the image but I am now losing the depth of the colour. I may me coming at this from the wrong angle. I am trying to have a nice blue gradient in a list and show an image to the left hand side. Similar to how a jquery mobile list is displayed. Is there another approach or a way to render the image last perhaps? — user3193843, May 19 '14 at 22:16

score 1 · Answer 2 · answered May 19 '14 at 21:57

The reason is in RGBA the "a" stands for alpha. Alpha channels allow you to produce transparency. Notice that the last value in the example gradient has a .65 in the fourth position, meaning that it is only 65% opaque. Your gradients start with a fully opaque color at 0% and go to a fully opaque color at 100%, so they essentially cover the entire image.

user3193843 · Answer 3 · 2014-05-20T00:42:30.483

0

show Finally got it working using the code posted above. Adding the url first made the image at the front.

background-size: 80px 80px; sized the image correctly.

So I was able to set all the opacities back to 1.

edited May 20 '14 at 00:42

answered May 20 '14 at 00:36

user3193843

295
1
3
15

CSS list not working if in Hex

3 Answers3

Linked