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:
- Lüftersteuerung-Thermofühler platzieren!
Lüftersteuerung,die Thermomesser wo-wie am besten befestigt man die?5Lüfter angeschlos...
- win7 movie maker video zuschneiden
- Grundlegende Fragen zum Webmaster-Dasein?
- Webmaster needed at international NGO’s headquarters in Berlin
Webmaster needed at international NGO’s headquarters in BerlinPart or Full TimeEnglish...
- Webmaster gesucht bzw. meine alte HP retten
- Hintergrund bei Homepage
- Was Startet im Hintergrund?
- datenschutz (14x gelesen)
- windows-defragmentieren-und-aufraeumen (13x gelesen)
- pc-einsteigerkurs (12x gelesen)
- windows-beschleunigen (12x gelesen)
- windows-geschwindigkeits-einstellungen (12x gelesen)
Mehr Tipps zu Webmaster: Hintergrund-Bild per CSS ...
-
Android Bildschirm auf den Fernseher streamen
Mit der Cast Funktion von Android (die auch im Chrome Browser eingebaut ist) lassen sich Inhalte auf andere Geräte streamen: Zum Beispiel Googles ChromeCast Geräte....
-
Windows 11 Screenshot: Als Bild oder Video speichern!
Seit Windows 95 macht man den Windows Screenshot mit der "Drucken" Taste: Das Bildschirm-Foto wird in die Zwischenablage kopiert und lässt sich direkt in andere...
-
Windows 11: Kostenlose Texterkennung in Bildern
Windows 11 kommt mit praktischer, kostenloser Text-Erkennung: Diese Funktion, auch OCR genannt, kann Text auf Bildern erkennen und hervorheben. Damit lässt er sich in ein...
-
Kostenlose Halloween Icons: Für Briefe, Mails oder als WhatsApp Sticker
Passend zu Halloween am 31. Oktober sorgen unsere kostenlosen Halloween Icons für etwas gruselige Stimmung: Ideal in Briefen, E-Mails oder als Sticker für WhatsApp! Auf...
-
Office Icons zum Download: Telefon Symbol, Fax, E-Mail…
Als Ergänzung zu unseren kostenlosen Word Pfeilen bieten wir hier zahlreiche Office Icons zum kostenlosen Download an: Ideal für Briefpapier oder selber gedruckte Visitenkarten, Dokumente...
-
Webmaster: Tabellenzeile mit CSS automatisch abwechselnd färben
Um die Hintergrundfarbe einer HTML Tabellenzeile mit einer Farbe zu versehen, hilft CSS. Für eine gute Lesbarkeit kann es aber gerade bei längeren Tabellen hilfreich...
Webmaster: Hintergrund-Bild per CSS platzieren und zuschneiden