CSS trik: Namesto naslova grafika ali slika

Velikokrat si želimo zamenjati kakšen naslov z grafiko ali sliko in obdržati vse prednosti optimizacije, kadar gre za naslove H1, H2 in H3.

Vse to lahko dosežemo s pomočjo CSS kode, ki nam zamenja besedilo v znački z željenim elementom.

Slika namesto naslova

Naslov h2

CSS

h2 { display:block; background-image:url(https://www.pomagalnik.com/wp-content/uploads/h2.jpg); background-repeat:no-repeat; text-indent:-9999px; width:125px; height:55px;}

HTML

<h2>Naslov h2

Slika namesto naslova + povezava

Naslov h2

Primer kode, ki zamenja naslov z sliko. Naslov je tudi aktivna povezava, ki ob zamenjavi ostane, tako da ima tudi grafični element povezavo.

CSS

h2 a {display:block; background-image:url(https://www.pomagalnik.com/wp-content/uploads/h2.jpg); background-repeat:no-repeat; text-indent:-9999px; width:125px; height:55px;}

HTML

<h2><a href="https://www.pomagalnik.com" target="self">Naslov h2</a></h2>

Komentiraj


*