Home arrow Style Sheets arrow Styling Headers, Navigation Bars and More with Image Backgrounds and CSS

Styling Headers, Navigation Bars and More with Image Backgrounds and CSS

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!

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 19
June 13, 2007
  1. · Styling Headers, Navigation Bars and More with Image Backgrounds and CSS
  2. · Styling the body section of a web page
  3. · Styling a basic header and a navigation bar
  4. · Improving the web page's title sections

print this article

Styling Headers, Navigation Bars and More with Image Backgrounds and CSS
(Page 1 of 4 )

A downloadable zip file is available for this article.


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!

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials