8

I would like to have an image as background and also a CSS linear gradient :

background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);

I dont'have problems with desktop browser (Firefox 44.x; IE 10; Chrome; Safari), but doesn't work with mobile browser (i tested with my iphone 5, (9.x) with safari, app firefox, app chrome).

I use this: 

background-image: url("/site/grigliatrasparente.png"), -moz-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -o-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -ms-linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
background-image: url("/site/grigliatrasparente.png"), -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,#404040), color-stop(2%,#dfbb80),color-stop(98%,#dfbb80),color-stop(100%,#404040));
background-image: url("/site/grigliatrasparente.png"), linear-gradient(left, #404040 0%, #dfbb80 2%,#dfbb80 98%,#404040 100%);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#404040, endColorstr=#dfbb80);
background-color: #dfbb80;

What's the problem?

Thanks a lot and sorry for my english :)

Borja
  • 3,359
  • 7
  • 33
  • 66

2 Answers2

3

In the early days of CSS3's multiple backgrounds, the problem was that the gradient takes the place of the background img, but things get solved and at mozilla-developer you can find an example like your idea that works fine, also mobile.
Your css looks fine, although you could run it throug autoprefixr to get the prefixes updated.
And before thinking about the possibility that perhaps one of the prefixes disturbs your display, FIRST check with your phone the functioning example (and of course the css) and set background-repeat and background-position for the background-image.

E.C.Pabon
  • 265
  • 1
  • 9
1

Check below the jsfiddle link. On my example, non-prefixed linear-gradient has been corrected to the last syntaxis: (in this case using 'to ...' for direction)

background-image: url(http://placehold.it/350x150), linear-gradient(to right, #404040 0%, #dfbb80 2%, #dfbb80 98%, #404040 100%);

https://jsfiddle.net/3u2Lhx6k/

more detailed info: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient.

Norberto Hdez
  • 54
  • 4