Your Customers are Mobile, you will be too …

In this tutorial we will be explaining the best way to add a gradient to the background of any webpage element using a method that improves page loading times over other method you may currently use simply by using CSS3 (with fall backs of course)

As designers we all use gradients in backgrounds all the time. To add texture to our designs or make our menu button look fancy for example.

Up until recently this has always been done with images and the most effect method involved just a small slice of a gradient image repeated up or across the image we are adding the background too. However this method involves loading the image (bandwidth) as well the server having to handle the request to get the image (HTTP requests). If we can remove these request particularly for popular website with large amounts of web traffic we should really be trying to do so.

Firstly we still need to make up the background image as we did in the past. This will only be used for browsers that are non-compliant. And we still embed it in the CSS stylesheet same as before.

/* fallback/image non-cover color */
background-color: #1a82f7;
/* fallback image */
background-image: url(images/fallback-gradient.png);

This helps us to degrade gracefully in the event we hit a browser we hadn’t planned for. Rather than rendering the gradient it will using the image instead.

Then all we have to do is add the gradient rendering CSS code:

body {
/* fallback/image non-cover color */
background-color: #1a82f7; /* fallback image */
background-image: url(images/fallback-gradient.png);
/* Firefox 3.6+ */
background-image: -moz-linear-gradient(#2F2727, #1a82f7);
/* Safari 4+, Chrome 1+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(#2F2727, #1a82f7);
/* Opera 11.10+ */
background-image: -o-linear-gradient(#2F2727, #1a82f7);

Now when a browser loads the page it will look at the CSS it has and see the gradients and loads them instead of the images we used to use but if it can’t understand the gradient codes it will then render the image. Failing that it loads the background color.

Note: As the image is removed if you change the size of the element the gradient will change to match the size of whatever it is applied too.

6 Responses to CSS3 Website Background Gradients

  • Hi, I was just wondering, which portion of your gradient code applies to IE? I see all major browsers listed except this one. Thanks for your help!

    • IE is covered but due the way its filters work, the filter was deliberately left out. With the IE filters if you wish to apply more than one filter to an element it will apply the first filter it encounters and ignore that the rest exist. So if someone were to apply a drop shadow around there element as well as the gradient (which is a very common combo) they would not acheive their desired effect so with this code IE gradient is still handled by an image through the fall back method. This leaves people the option to add a filter for something else to it.

      Unfortunately IE likes to be a pain like that.

  • I saw a lot of website but I conceive this one has something extra in it. “When something can be read without effort, great effort has gone into its writing.” by Enrique Jardiel Poncela.

  • I enjoyed reading your pleasant website I see you offer priceless info stumbled into this website by chance but I’m sure glad I clicked on that link You definitely answered all the questions I’ve been dying to answer for some time now Will definitely come back for more of this.

  • And also traveling to this webpage for quite a while right now, when i find it difficult to imagine the excellent details you’re writing about! You do have a routine visitor to your site in me!

  • this short article really helps to me,thank ough.

Leave a Reply

Please buy me a Coffee

Help a starving student to drink more coffee

Follow us on: