Submit Your Article
Guest post by Chris Coyier of CSS Tricks, a blog sharing tips, tricks, and tutorials on using cascading style sheets.
Almost every single CSS property supports the background property. This property alone gives CSS incredible aesthetic control over web layouts. But keep in mind that images are the biggest culprits in increasing page weight and slowing down load times. To help keep your pages trim, remember that you can use the same background image for as many elements on the page as you wish, your server will only have to serve up that image once.
Gradients are a popular choice for background images and they help out page weight in another significant way: they are repeatable. Take a look at the gradient below. To the left you can see how the gradient looks. To the right you can see that you can squish it down to only a single pixel in width and it will repeat horizontally just the same.
The image is 200 pixels tall, to accomodate for the growth of page elements. The bottom gradient is there in case the element grows really huge, the background will repeat gracefully vertically as well (or at least a little less jarring).
Now check out the example below. I have used this same image for the background of a header element, list item elements, and an anchor element. The anchor is especically fun, as you can set the background position to bottom instead of top on hover and get a pretty nice looking rollover effect.
Click here to see live example!
Topics: CSS, Design, Web Development
