I put in a fallback image for some gradients that I have in a login box, but I’ve realized in both the modern firefox and chrome its skipping the code and going straight to the fallback image.
background:-moz-linear-gradient(19% 75% 90deg,#0177a9, #53c3e8);
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#53c3e8), to(#0177a9));
background-color: #0177a9;
background: url(../images/signin.png);
background-repeat: repeat-x;
background-position: -5px -13px;
The fallback image is actually just a screenshot of the login box but it looks identical to how it looks when formed via the CSS3 gradients.
If I take out the fallback image and colour it will load the correct webkit or moz for each browser but as soon as I put the fallback it loads the fallback.
I know it uses the fallback because i set its position at a wrong angle just to see if it was loading and it did. Can anyone help me? It doesnt make sense that its happening.
Thanks!
If its a fallback then you need to have the image BEFORE the garadient definitions, otherwise its just going to override them.