Join Us On Social Media

When you're integrating responsive design, using a background image in your CSS can become tricky, but it's not impossible. In order to maintain best practices and keep on the cutting edge, consider using CSS gradients instead of background images.

It's not uncommon to see a website design that utlizes background images in different areas of the site—perhaps behind a form or in a news feed. Sometimes the images are solid and easy to code, sometimes they have a fade that eventually goes to a solid color, and sometimes there's a random, rounded corner—all doable. But then there are times when the main feature of background is actually a gradient image that fades in the middle—it has to be an image, right? Wrong. With the updated advantages of HTML5 and CCS3, you can now code gradients in your files.

It takes a bit of CSS understanding and knowing where positions are within the code. There are special lines for different browsers, as well, so take note of that. Since we can't all be custom hand coders, here are some generators to get you started.

Examples of CSS Code Generators

CSS Gradient Generator My personal favorite because you can pick the color swatches on the screen. I have noticed it doesn't always take in Firefox and sometimes involves some tweaking, so double-check it before you publish your page.

Cross-Browser CSS Gradient This is actually less of a generator and more of an explainer. It's a great place to start if you want to learn what positions go where for which browser and how to adapt your CSS for each.

CSS3 Gradient background This is just another reference point, but I like the examples and double-check my work this way, too.

There are plenty of other responsive design, CSS3 and HTML5 tips and tricks out there. What tools have you found most helpful?

Nice article. Which social share plugin are you using? I like the way it floats left but then repositions to the top when the screen is minimized. I have been reviewing a lot of the share plugins and have not yet found the functionality I'm looking for. I really like this one. Thank you. Sandy