Geek Answers Handbook

Linear gradient and url image for Mobile browser?

I would like to have an image as a background, as well as a linear CSS gradient:

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

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

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 is the problem?

Thank you very much and sorry for my english :)

+8
css css3 autoprefixer mobile-browser css-gradients
source share
2 answers

In the early days of CSS3 a lot of background, the problem was that the gradient replaces the img background, but everything is solved and in mozilla-developer you can find an example similar to your idea, which works great, as well as mobile.
Your css looks great, although you can run it through autoprefixr to update the prefixes.
And before you think that perhaps one of the prefixes violates your display, FIRST will check with your phone an example of functioning (and, of course, css) and set the background repetition and background position for the background image.

+3
source share

Check out the jsfiddle link. In my example, not the linear gradient prefix has been adjusted to the last syntax: (in this case using "to ..." for the 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 information: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient .

+1
source share

More articles:


All Articles