background image plus gradient plus retina-ising equals problem

background-size is the issue

[Setek]

Hi all,

I'm finding an annoying issue with background images (which are being replaced for retina-isation,) mixed together with background-gradients, and it's because of

background-size

.

Here is some code:

/* regular code */

.gradient { height: 150px;
margin: 10px 0;
background: url('image.png') no-repeat 50% 50%, -webkit-linear-gradient(top, #fff 0%, #ccc 49%, #ddd 50%, #777 100%); /* 125 x 125 */
border: 5px solid #333; }

.gradient.gradient-linear { background: url('image.png') no-repeat 50% 50%, -webkit-linear-gradient(top, #fff 0%, #777 100%); /* 125 x 125 */ }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 320px),
only screen and (min-resolution: 144dpi) and (min-width: 320px) {

.gradient { height: 150px;
background: url('[e-mail]') no-repeat 50% 50%, -webkit-linear-gradient(top, #fff 0%, #ccc 49%, #ddd 50%, #777 100%); /* 125 x 125 */
background-size: 125px 125px; }

.gradient.gradient-linear { background: url('[e-mail]') no-repeat 50% 50%, -webkit-linear-gradient(top, #fff 0%, #777 100%); /* 125 x 125 */ }

}

What happens is the background-sizing affects not just the image, but also the background gradient. This is fine if your image is as high as your gradient, but if it's the case of mine, where the background image sits within something like a button, and then the gradient spans the entire length of that button, you'll notice the gradient now repeats.

Has anybody been face with this situation?

What fixes could there be?

The only thing I could think of was to

• increase the gradient % to extend beyond 100% (does not work.)[/*]
  
• create another element within, so the outer shell works the gradient, the inner works the background-image only--with lots more effort on the person changing the HTML. Me.[/*]

Thoughts?

[DrDoc]

Well, first of all -- multiple backgrounds are not yet quite as well supported as we would like.

I recommend something like this:
<a href="#" class="gradient"><span class="icon"></span>Text</a>

That, or pre-size your image to whatever size you want them rendered.

[Setek]

Hi DrDoc,

Yep, that was the only solution I could think of too :/

The site is mobile-only (separate from the desktop-sized site) so ... since every version of iOS Safari and Android browser can deal with it, that's what we use.

[caniuse.com...]

Well, used to use. I have recoded all these instances to have a separated gradient from icon element!

Cheers

[rainborick]

I think the problem may be that you're only setting one background size, which gets applied to both background images. If you change it to something like:

background-size: 125px 125px, 100% 100%;

you might get the effect you wanted. Without seeing the applicable HTML, it's hard to test your code.

It would also be a good idea to add multiple instances of your 'background' rule to include the other vendor prefixed variations of linear-gradient, as well as the standard. Webkit browsers dominate, but they aren't the only mobile browsers out there.

[Setek]

rainborick, you are a marvellous human being! Thank you very much :)