Rundes Bild mit HTML/CSS

Rundes Bild mit HTML/CSS

Runde Bilder sieht man mittlerweile auf vielen Websites. Sie sehen einfach etwas schöner und stimmiger aus, als Bilder, die einfach viereckig sind. Für den „Über mich“-Bereich in der Sidebar brauchte ich ein rundes Bild.

Die bereits installierten Widgets boten mir zwar eine abgerundete Möglichkeit an, allerdings war das Bild dann viel zu groß. Ein neues Plugin bzw. Widget wollte ich dafür nicht installieren, Photoshop oder ein anderes geeignetes Bildbearbeitungsprogramm hatte ich nicht auf dem aktuellen Rechner. Daher habe ich folgende einfache Lösung für runde Bilder mit HTML/CSS verwendet.

1. Runde Bilder mit CSS

Fügt folgende Codezeilen in eure CSS-Datei ein. Entweder über den Theme-Editor bei WordPress, direkt über die CSS-Datei (Down- und Upload mit einem FTP-Programm) oder über eine CSS-Implementierung, die euer Theme ggf. anbietet.

/* Runde Bilder */
.rund {
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px
}

Sobald ihr die CSS-Daten eingebaut habt, könnt ihr auch schon runde Bilder problemlos verwenden.

2. Runde Bilder mit HTML

In der Sidebar habe ich ein HTML-Widget hinzugefügt, in anderen Bereichen könnt ihr einfach den Text-Editor verwenden, um den HTML-Code für das runde Bild einzubauen.

<img class="rund" src="dein-bild.jpg" width="[Bildgröße]" alt="[Alternativtext]">

Rundes Bild mit HTML/CSS - Vorher-Nachher-Vergleich
Rundes Bild mit HTML/CSS: Vorher-Nachher-Vergleich einfach auf deiner Website und ohne Bildbearbeitungsprogramm

Ihr seht, runde Bilder mit HTML/CSS sind kein Hexenwerk.

Was passiert? Durch die Definition der Klasse in der CSS-Datei könnt ihr dem Bild diese Klasse im HTML zuordnen. Die CSS-Klasse wird dann für dieses Bild angewendet.

Vergesst den alt-Tag nicht, damit ihr eure Bilder entsprechend unterstützt (siehe Bilder SEO).

Hat’s geklappt?

Warum kein Plugin?

Eventuell kommt die Frage auf, weshalb ich kein einfaches Plugin installiere. Ja, das kann man natürlich machen. Ich bin jedoch sehr performancegetrieben. WordPress stellt ein super CMS für jedermann bereit, für Ladezeiten und SEO durchaus geeignet. Allerdings torpediert jedes Theme, jedes Plugin, jedes JavaScript dieses optimierte System. Viele „SEO ready“-Versprechen der Plugin- und Theme-Anbieter sind einfach nicht wahr. 

Vieles ist also sehr einfach und damit ressourcenschonend mit wenigen Codezeilen umsetzbar. Probiert’s einfach!

Wenn ihr noch mehr Tipps und Tricks für WordPress lesen wollt, schaut einfach in meinen WordPress Blog.

 

Jörg Niethammer

Seit 2003 aktiv am Websites bauen und pflegen, Abi, Bundeswehr, Studium und dann vollends ins Online Marketing. Vor allem SEO, Technical SEO und WordPress haben es mir angetan. Neben der Arbeit bin ich privat sehr gerne mit dem Fahrrad unterwegs und engagiere mich an der Fasnet.

Schreibe einen Kommentar