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 utilizes 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.
There are plenty of other responsive design, CSS3 and HTML5 tips and tricks out there. What tools have you found most helpful?
Photo credit: Lelê Breveglieri
As a creative web developer, Maddie Weber truly enjoys drinking lattes, focusing on user experience for website design and development, and writing haikus. You can connect with her on Twitter.
© Kuno Creative - All Rights Reserved