Commenting On Replace HTML Tags with Images via CSS

In this tutorial I will be demonstrating how to replace HTML Elements and Tags with images through CSS.

Why is this applicable?
Suppose you are using WordPress and you want to add your logo to a theme. By default WordPress adds something like the following code:



<div id="headerimg">
<h1><a href="/">Your Blog Name</a></h1>
<div class="description">Description</div>
</div>

And instead of having Your Blog Name you want to have your logo. Well, you can do that all through CSS. This same technique is great for replacing plain text with images for menus.

First the CSS and then I’ll explain.



#headerimg h1 {
background:url('images/logo.jpg') no-repeat 0px 0px;
display: block;
height: 0px;
padding-top: 40px;
overflow: hidden;
width: 220px
}

The Explanation
So in order to do this all through CSS we need to add a background image that is aligned to the top left or 0px 0px. We want this image to be displaying as a block so that we can mess with the height and width. The height we are setting to 0px because we do not want to have the words Your Blog Name to be showing up on top of our logo. Instead we will use padding to change the height of the container to the size of our logo image. Make sure to make the overflow set to hidden so that the blog title does not show up underneath.

Why not just add an image?
Images are great and all, but this way is helpful for search engines and browsers without CSS support. When CSS is disabled or not read the words Your Blog Name still appear in both search engines and CSS disabled browsers. You could use the alt tag to put the name of your title in, but when images are not displayed the typographical hierarchy is lost.

Well that it for this tutorial. I’ll hopefully be adding an addition to this later on for CSS menus that will include rollover states.

Comments are closed.