Home arrow Style Sheets arrow Using Empty Span Tags with H2 Headers for Image Replacement

Using Empty Span Tags with H2 Headers for Image Replacement

In this eighth installment of a series on image replacement techniques, you'll learn how to use Fahrnerís enhanced image replacement method for styling all of the H2 elements included in a sample web document. This method uses two empty <span> tags in a clever way which permits you to efficiently solve the problem caused by broken background images.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
December 08, 2009
  1. · Using Empty Span Tags with H2 Headers for Image Replacement
  2. · Review: the enhanced Fahrner's IR technique
  3. · Styling H2 elements with Fahrner's enhanced IR method
  4. · Putting it all together on one web page

print this article

Using Empty Span Tags with H2 Headers for Image Replacement
(Page 1 of 4 )

True to form, one of the most appealing facets of CSS-based image replacement (IR) is its remarkably flat learning curve. Many of the methods created for this purpose in the past few years can be mastered by those with only an intermediate background in style sheets and (X)HTML.

Therefore, if youíre a web designer who wants to start digging deeper in the always-exciting terrain of image replacement, then in this group of articles youíll find a comprehensive guide that will show you how to implement the most efficient IR approaches available today. You can use them to give your web pages a fresh look without messing up their structural markup.

Naturally, if youíve already read all of the tutorials that precede this one, then itís probable that you understand the IR methods developed by Mike Rundle and Todd Fahrner respectively. In those articles I demonstrated how to implement the methods via a decent variety of code samples, first decorating H1 and H2 headers and then styling some basic <a> elements.

However, itís fair to mention here that the original Fahrnerís approach has been considerably improved over time. Currently it allows you not only to add eye-catching background images to different text-based web page elements, but helps you to keep those elements visible even if the pertinent images fail to download.

In the last part of the series I showed how to use this enhanced IR method only with a single H1 header, but as you may have guessed, itís possible to apply it to other HTML elements with the same ease. Thus, in the next few lines Iíll be discussing how to use Fahrnerís improved technique with multiple H2 headers, a process that hopefully will be educational and, why not, also fun.

Ready to learn more useful things about this handy image replacement method? Then start reading now!

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials