PNG-Bilder statt JPG und GIF?

Darstellung überprüfen, weitere Beispiele

  1. Bildformate neu entdecken
  2. Tricks mit PNG
  3. Darstellung überprüfen, weitere Beispiele
#footer_2 {
background: url(footer_2.png) 0 0
no-repeat;
width: 900px;
margin: 95px auto 0;
height: 91px;
}

Für diese Art der Platzierung geben Sie die angenommene Breite in Pixel für Ihre Webseite an, damit die Platzierung entsprechend erfolgen kann. Da das Hintergrundelement 900 Pixel breit ist und sich die Positionierung daran anlehnt, wird die Breite analog gewählt.

Unser Beispiel war nur eine abstrakte Spielerei, im täglichen Einsatz können Sie jedoch Ihre Webseite so gestalten, dass Sie am unteren Ende beispielsweise Kontaktdaten, Impressum und weiterreichende Links platzieren. Eine Sammlung an Beispielen von Footern, die auf CSS und oftmals auch auf PNG basieren, finden Sie hier.

Durch die freie Kombination der beiden Elemente haben Sie auch mehr Flexibilität in der Gestaltung. Sind beide bereits im Vorfeld über ein Grafikprogramm zu einer Einheit verschmolzen worden, müssen Sie bei der Neugestaltung das komplette Design wieder anpassen. In diesem Beispiel genügt es, eine der beiden Dateien auszutauschen und gegebenenfalls die Positionierung der Elemente zu überprüfen.

Darstellungsprobleme

Gerade mit älteren Browsern gibt es massive Darstellungsprobleme im Zusammenhang mit PNG und der Transparenz der Bilder. Nutzen Sie einen der aktuellen Browser, lassen sich diese Probleme für Sie nicht mehr nachvollziehen. Damit Sie sichergehen können, dass Ihre Darstellung korrekt arbeitet und der Hack für den Internet Explorer bis Version 6 auch wie geplant funktioniert, sollten Sie dies vorab prüfen.

Da sicherlich nicht mehr alle eine alte Version des Browsers parallel installiert haben, bietet sich die Nutzung eines Dienstes, wie Browsershots an. Mit diesem können Sie die Interpretation der Webseite simulieren.

Das Tool arbeitet die Darstellung der URL über alle angegebenen Browser ab und fertig jeweils einen Screenshot an. Dieser wird anschließend ausgegeben. Abhängig von der Anzahl der ausgewählten Browser kann die Bearbeitung bis zu einer Stunde dauern.

Beispiele und Ideen

Diese Beispiele mit PNG-Grafiken lassen sich noch beliebig ausbauen. Auf der Webseite von Self-HTML finden Sie ein Beispiel, in dem mithilfe von CSS und PNG-Dateien sowohl am oberen, als auch am unteren Ende des Fensters eine Art Vorgang platziert wurde und der Bereich dazwischen für die Darstellung von Text verwendet wird (aktuell.de).

Auch für die Navigation lassen sich PNG-Grafiken gut einsetzen. Auf der Webseite von Creative Pro wird erläutert, wie Sie mithilfe von CSS und PNG eine ansehnliche Navigation darstellen können (www.creativepro.com).

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".