CSS3 Gradient & Background Image

I am sure that I’m not the only one who is digging more and more into what CSS3 capabilities have to offer us. The buzz about all the things that you can do has been around for some time now. However, people were hesitant about taking their stab at it for one main reason – poor browser support.

A year ago, I got more enthusiastic about it after getting my hands on Handcrafted CSS by Dan Cederholm. Dan answers one question that most of us ask ourselves: Do websites need to look exactly the same in every browser? No, they sure don’t! For the most part, all that matters to many of us is that an end-user can navigate and effectively use our site while still looking nicely.

As the time went on, more and more people started to publish or post more on subject. As a matter of fact, yesterday Dan came out with yet another book, CSS3 For Web Designers. It’s second book that A Book Apart published this year, following after Jeremy Keith‘s HTML5 For Web Designers. A book that seems to have it all that you may need to know nowadays, and then some is Hardboiled Web Design from Andy Clarke.

Anyway, today was just one of those days where I got a chance to work from ground up on some new templates for a client who needs a copy of its current site for their Canadian audience, while keeping same branding as well as design of their US site. So I told myself that this will be a perfect opportunity to minimize use of all the background images that are used for gradients or shadows, as well as other visual enhancements. I’d like to demonstrate our client how much can improve overall performance of their site, when not being so set on having all the bells and whistles among all browsers but still looking good.

As I was working along, I ran into a little road block when I wanted to apply to same element a CSS gradient as well as a background image.

Originally I started with following CSS:


ul li {
  background:url(IMG URL) repeat-x 0 100%;
  background-image: -moz-linear-gradient(0% 100% 90deg, #e9f0f7, #fff);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e9f0f7));
}

It was close but not quite what I wanted. My background image was being hidden behind gradient. View demo.

I started to have doubts whether such thing was even possible till I found a confirmation that in fact it is possible to combine background image and CSS3 gradients. Yay for me, right? 🙂

So, here I went with few minor changes to my CSS by specifying background color as a fall-back for browsers that don’t support CSS3 gradients. View final demo results.


ul li {
     background-color:#e9f0f7; /* fallback for IE and Opera */
     background: url(IMG URL) repeat-x 0 100%, 
        -moz-linear-gradient(0% 100% 90deg, #e9f0f7, #fff);
     background: url(IMG URL) repeat-x 0 100%, 
        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e9f0f7));
}

When it comes to IE, there are few ways that you can approach this. You can either add:


ul li {
     background-color:#e9f0f7;
     background: url(IMG URL) repeat-x 0 100%, 
        -moz-linear-gradient(0% 100% 90deg, #e9f0f7, #fff);
     background: url(IMG URL) repeat-x 0 100%, 
        -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#e9f0f7));
     
     /* make IE happy */
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#ffffff, endColorstr=#e9f0f7);
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#ffffff, endColorstr=#e9f0f7)";
}

…which will however cover your background image again. There is always possibility to just use a 1px wide background image that will have you gradient, as well as your graphic needed to complete your design that you will refer to in your ie-specific style sheet.

I sure hope this makes some sense. Maybe you might have a better solution to this problem when it comes to accounting for other browser support, so feel free to let me know by commenting.