homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

background image plus gradient plus retina-ising equals problem
background-size is the issue

 1:35 am on Jun 13, 2013 (gmt 0)

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

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('image@2x.png') 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('image@2x.png') 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.[/*]




 4:10 pm on Jun 13, 2013 (gmt 0)

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.


 1:44 am on Jun 14, 2013 (gmt 0)

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.


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



 3:57 am on Jun 14, 2013 (gmt 0)

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.


 4:05 am on Jun 14, 2013 (gmt 0)

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

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved