CSSRule: The Café Tutorial 9 - Title Logo & Image Replacement Technique

Thursday, May 07, 2009

The Café Tutorial 9 - Title Logo & Image Replacement Technique

I replaced the title text, "Four Square Cafe" written across the Café site in blue, with a logo image that I created in Photoshop using squares and shadowing tool. You can add this image to the document by using the "img" element. No CSS is needed:

<div id="homepage">
<img src="http://pics.cssrule.com/pics/logosquare3.jpg" alt="css logo" /> 
<div id="intro">
<p>Four Square Café is located at the intersection of . . . . .

This is a very easy, straightforward way of adding an image to a document but there's a better way: the image replacement technique where you replace an element, in our case, the "h1" heading with an image. Although it involves more steps than inserting a single img element, this technique lets you retain more meaning in your document because of how your image gets associated with the h1 element instead of floating as a lone img tag in the markup. We will not delete the h1 element or the text contained in it because we want people who are using screen readers to "see" the heading by way of hearing.

The markup is not going to change much because I want to keep the h1 element and the title but with one key difference: I don't want to display the h1 element and write over the logo image. Displaying both, the image and the text, will be redundant so what I'm going to do is to hide the text visually. There's a visibility property in CSS so you could set that property to hidden for h1 element. However, I am planning to give the h1 element a background image in the CSS. That background image is really our logo jpeg for the site so if I want to display a background for h1, setting its visibility to none will be counterproductive.

That's when the span element which I can use to put a layer of separation between the h1 element and title text comes in handy. CSS styling rules that I apply to the span element will not effect the h1 element since the span in this case will be a descendant rather than the parent like h1 is to its span. I write a descendant selector that sets the visibility of the span to hidden:


h1 span { visibility: hidden; }

This is setting all the span tags that are descendants of h1 headings to be invisible. If you ever wonder why the title text which was properly placed in an h1 element is now also sandwiched between span tags, don't forget that this has to do with the visibility property that we are working with. If I set the visibility of the h1 element to hidden then I will stop the background image from displaying also which is not what we'd want to do as I explained before.

h1 {
  background: url("http://pics.cssrule.com/pics/logosquare3.jpg") 0 0 no-repeat;
}
h1 span { visibility: hidden; }

</style>
</head>

<body>
<div id="homepage">
<div id="intro">
<h1><span>Four Square Café</span></h1>

<p>Four Square Café is located at the intersection of Melrose and Sunset .....

In the CSS, I added a background property for the h1 element, setting its background image to the logo jpeg, "logosquare3.jpg". no-repeat option ensures that we don't repeat the image and we place it at the top left (0,0) position.

You can see how this changed our page here. Only problem is our image is being cut off. This is because the browser is only allocating enough space for the h1 heading and does not know that we have a larger image for h1's background. You can see a snapshot of the problem in the next section.

In its Layout option, Firebug Debugging Tool shows how much height is allocated for h1. The length of the blue outlined box will change based on the width of your browser but the height will always stay at 21 pixels. The yellow stripes above and below the clipped image are margins which in this case are set to 14 pixels each:

To fix this, we are going to add height and width that matches the dimensions of our image:

h1 {
  width: 253px; height: 160px;
  background: url("http://pics.cssrule.com/pics/logosquare3.jpg") 0 0 no-repeat;
}
h1 span { visibility: hidden; }
</style>
</head>

<body>
<div id="homepage">
<div id="intro">
<h1><span>Four Square Café</span></h1>

<p>Four Square Café is located at the intersection .......

The new height and width properties allow the image to display properly.

Café History:
Our cafe page is displaying a logo image instead of text for title although if you are using a screen reader, you will still hear the title text read to you.

After letter-spacing and text-transform properties applied. How line-height and font properties changed the document. After adding the 40 pixel margin. Before adding the 40 pixels, our document looked like this. Just to remind you what XHTML can do, we started out with text running into each other.