Subscribe to my RSSHowto: Replace your h1 text with an image
The purpose of this howto is to replace your <h1> text with an image resulting something like this
Why?
Because you can have a simple anchor text like <h1>very good keyword</h1> seen by search engine and in the same time you get an image saying another cool tagline.
And because images is prettier than plain text, unless you’re Jon Tangerine, that is.
How?
First you have to create an image that you’re going to use to replace the <h1> tag and note the dimension (that is the height and width).
The html is pretty simple really:
<h1>Something here</h1>
And the CSS goes like this:
h1 {
background: url(images/url_ke_gambar.jpg);
height: tinggi_gambar_disini px;
text-indent: -999em;
width: lebar_gambar_disini px
}Piece of cake, eh? Now you’d want to take this further by replacing other html tags with images. You can apply the same CSS style to any html tag like <label> or <h4 class="title">. But do remember tho, if you want to use it on a link, you will need to define display: block to the link, like this
h1 a {
background: url(images/url_ke_gambar.jpg);
display: block;
height: tinggi_gambar_disini px;
text-indent: -999em;
width: lebar_gambar_disini
}Well, so much for a tutorial eh? I’m not good at this but I’m trying :D
Note: the tinggi_gambar_disini px thing should look like 190px, I write the space in between for the sake of nice reading.
May 22nd, 2008 at 10:23 am
nice one, mate! :)
May 22nd, 2008 at 11:33 am
oooo gitu tho, ini lebih cespleng penjelasan ketimbang di web2 tutor :D
May 22nd, 2008 at 12:38 pm
Kok kemaren ndak jadi KONTAK? jadi ndak ke Malangnya kang?
May 22nd, 2008 at 4:06 pm
tanya pak, itu “tinggi_gambar_disini px”, px-nya bukannya mestinya dempet ya dengan “disini”?
May 22nd, 2008 at 4:10 pm
@daustralala yak begitulah :D
*post updated*
May 23rd, 2008 at 9:14 pm
ekhm…
properti text-indent itu maksudnya apa yah?
*ngetes mode on
May 24th, 2008 at 8:44 pm
kok kayaknya nuansa warna blognya suram banget ya?
lebih suka yang dulu deh
May 25th, 2008 at 12:44 pm
waahh… udah lama banget gak mainan yang begituan! dulu waktu masih numpang dan ngutak-ngatik rumah di blogspot sih rajin, nah sekarang…?!
May 25th, 2008 at 3:04 pm
setau saya, lebih baik pk teks untuk H1. biar SE bisa baca,.
May 25th, 2008 at 4:58 pm
buy 1 get 2 :)
does it possible to make “buy 1 get 4″?
in the next HTML 5, they’ll have “audio” and “video”.. :D cmiiw yaa..
May 26th, 2008 at 7:28 am
HAPPY BIRTHDAY!!
May all the wishes come true and your life’s full with happiness.
Party hard?
May 26th, 2008 at 2:38 pm
I need more like this,
I’m usually do the css work by self learning, not with the books or formal tutor. As long as my design looks great, i don’t give a damn with css rules. Now I’m realize it that I was wrong (hope not like “ketika kamu menyadarinya semua sudah terlambat”)
May 26th, 2008 at 3:19 pm
@ikecek: buat meng-indent brur, nah indent to ape kaden artine
@lita: you think so? then the redesign was a success ;)
@Riri Audiya: ini dibaca SE sebagai teks biasa kok jeung (eh, SE disini maksudnya Search Engine, bukannya SonyEricsson kan?
@dani: it is very possible sir :D
@Silverlines: thankyou! yup, kinda, still on hangover :D
@amazu: I will do more of these kinds of article dude, dan ini belum terlambat sebelum kamu menyadarinya demikian
And this, ladies and gentlemen, is the longest comment I’ve ever made on this blog.
May 27th, 2008 at 2:38 am
Ane coba tuh boss tips nya.. tp kok cmn nge set tex-indent nya doank jd 999em ? en jadi nyekroll ke samping tuch…
May 27th, 2008 at 6:41 pm
kalo gw masih luang kaya dulu dah gw cobain trik dari lo nih! sayang gw lagi hectic beratttt!!!! ><;;;
May 28th, 2008 at 10:28 am
@Pay Joe: Maybe you forgot to declare the width? Post some codes so we can see dude :D
@Kana: Haha, semua orang lagi miskin waktu luang yah sekarang. Sama kok jeung
May 28th, 2008 at 7:45 pm
here’s the code boss..
h1 {
background: url(ohh.gif);
text-indent: 999em;
width: 240px;
height: 320px;
}
May 28th, 2008 at 11:09 pm
#Pay Joe : text-indent nya coba di kasi - (minus) semoga aja bisa tuh.
misalnya: text-indent: -9000px;
May 29th, 2008 at 1:42 am
@ Pay Joe & @ ikecek: MY BAD :D
sorry forgot the minus, seharusnya text-indent: -999em tuh..
May 29th, 2008 at 4:14 am
saya merasa kehilangan dua titik koma. atau memang begitu saja bisa?
May 29th, 2008 at 6:46 am
@bodhi titik koma di selector terakhir kah? kalo itu sptnya bisa diomit, or did I miss something else? :|
May 30th, 2008 at 12:30 pm
Alright… very good Mr. Prima… i’m very proud of you…
May 30th, 2008 at 12:47 pm
@Pay Joe: Oh it’s you! :))