Styling Headers, Navigation Bars and More with Image Backgrounds and CSS
(Page 1 of 4 )
Tiling background images with CSS is a simple technique that can make your web pages look much more attractive to your web site's visitors. If you're interested in learning how to put this popular approach of modern web design to work for you in no time, then you should start reading this article now!
A
downloadable zip file is available for this article.
Introduction
Welcome to the final tutorial of the series that began with "Manipulating Image Backgrounds with CSS." Over the course of this series, you'll find numerous hands-on examples that show how to add some eye-catching styles to the different elements of any web document by using only a few simple background pictures.
As you'll probably remember, in the first article of the series I explained the basic concepts concerning the utilization of background images to improve the overall appearance of any web document with a few simple steps. Of course, this basic yet effective method for manipulating backgrounds via some basic CSS styles is in fact very popular with web designers with a solid background in this exciting terrain.
However, I'd like to clarify that this series isn't intended to be a guide for experienced designers. Instead, it should be considered an approachable introduction to tiling background images with CSS, something that can be useful if you're stuck in the process of providing your web site with an attractive look and feel, and need to give it a neat touch without working with professional image retouching techniques.
Having explained that, it's time to introduce the topics that I plan to cover over the course of this final article of the series. Since I showed you how to use some simple tiled background images in the preceding tutorial to improve the overall presentation of a sample web page, in this article I'm going to teach you how to utilize the same CSS-based approach to style different elements of a web page, including its corresponding heading and navigational sections. Sounds pretty interesting, right?
Now, with the preliminaries out of our way, let's continue learning together how to use a few basic background pictures to turn a boring, text-based web document into a colorful portrait. Let's get started!
Next: Styling the body section of a web page >>
More Style Sheets Articles
More By Alejandro Gervasio
