Webmaster: Hintergrund-Bild per CSS platzieren und zuschneiden

Ein Hintergrundbild muss nicht zwingen ein schönes Foto sein, das tatsächlich im Hintergrund angezeigt wird: Stattdessen lässt sich mit der CSS Eigenschaft “background-image” auch ein Button erstellen: Dies ist zum Beispiel ein klickbares DIV Element, dass statt einem IMG Bild ein Hintergrundbild enthält.

Das muss aber nicht zwingend den ganzen Bereich ausfüllen, sondern kann auch als ein Icon mittig in dem Element platziert werden: Das ist mit einem als IMG eingebundenen Bild schon nicht mehr ganz so einfach.

<style type="text/css">
.menu0 {
   width:200px;
   height:230px;
   background-color:#315187;
   border:1px solid #000;
   background-image:url('icon.png');
   background-size:50%;
   background-position:50% 50%;
   background-repeat:no-repeat;
}
</style>
<div class="menu0"></div>

Durch die Angabe “background-size:60%” wird das Hintergrund Bild (hier ein Icon) auf 60% verkleinert, anstatt in voller Größe gezeigt zu werden. “background-position:50% 50%;” sorgt dann dafür, dass das Bild in dem DIV zentriert angezeigt wird: Alternativ könnte man das auch mit “background-position:center;” angeben.

So sieht das zentrierte Icon dann als CSS Hintergrundbild aus: