A while ago, I heard rumors that the next incarnation of HTML would include support for easily replacing HTML elements (such as headers) with images by simply adding a “src” attribute to the HTML tag. For instance, you might be able to do something like:
<h1 src="myimage.png">This is my alt text</h1>
However, it seems that the advent of this type of thing, if it ever happens, is still quite a ways off. Therefore, if you’re looking for an easy way to replace a plain text header with a nice image, for instance, a banner, you need to find another way of doing so.
This article will briefly explain how to do so using purely CSS.
It’s very simple, actually. You just need to add a background image to your header, then hide the text. An example would look like:
Banner Image
In order to do something like what’s shown above, you need to follow these steps:
- Begin by creating your banner image.
- Upload the banner image to your Web server somewhere
- Create an H1 tag in your HTML. Add your “alt” text as the actual text of the H1 tag. This text will show up in the instance that CSS is disabled.
- Assign the following style definitions to your H1 tag:
- background – You need to set the url of the background property to lead to the header image you uploaded. You also need to set the background not to repeat.
- width and height – The width and the height of your header need to be set to 0. This is the first step in hiding your alt text.
- overflow – Set the overflow property to hidden. This is the second step to hiding your alt text.
- padding – Set the padding-top property to the exact height of your banner image, the padding-right property to 0, the padding-bottom property to 0 and the padding-left property to the exact width of your banner image.
Voila! You’re done. You can set any of the other style properties you want, but the ones listed above are the important ones. The code for the example above is shown below. I hope this helps.
<h1 style="background: url(/wp-content/uploads/2009/07/banner-test.jpg) no-repeat; width: 0; height: 0; border: none; padding: 75px 0 0 400px; overflow: hidden;">Banner Image</h1>