Joomla Template Design – mobiles Hintergrundbild mit gesamten Content

Nachfolgend eine Möglichkeit ein Hintergrundbild in Joomla (Version 3.2.6) auch für mobile Geräte, wie Smartphones und Tablets bzw. für geringere Fensterauflösungen, vernünftig darzustellen.

In diesem Fall war es so, dass auf einem Bildschirm mit >1024px Auflösungen alles vernünftig angezeigt wird, also das Hintergrundbild und der vollständige Content. Wenn das Fenster jedoch stark verkleinert wird, wie auf Smartphones oder Tablets, erreicht das Bild mit seinen festen Werten von z.B. 1024x 900 px seine Grenzen. Entscheidend hier ist die Höhe des Bildes, die ja mit 900px fest ist. Wird jedoch der Bildschirm kleiner, muss der selbe Inhalt entsprechend in der Höhe neu verteilt werden, wodurch 900px in der Höhe irgendwann nicht reichen und der Content abgeschnitten wird.

Nun gibt es mehrere Lösungen. Eine wäre es ein ausreichend großes Bild zu verwenden, was jedoch bedingt durch die Dateigröße mehr Ladezeit bedeutet. Das ist grade auf mobilen Geräten ein Thema. Die andere Möglichkeit ist es verschiedene Bilder für verschiedene Auflösungen zu verwenden und das beschreibe ich hier kurz.

Ich habe hierfür den Inhalt der Webseite mit den meisten Content geladen, dann das Fenster solange verkleinert bis ich feststellen konnte, ab welcher Höhe der Content abgeschnitten wird und entsprechend das Template angepasst.

1. 2 Hintergrundbilder erstellen – 1x für Auflösungen >480px (hintergrund-full.jpg) und 1x für Auflösungen <=480px (hintergrund-480.jpg), diese ins „webseite/template/deinTemplate/images/“ kopiert

2. im Template, ausgehend von einer neuen Installation mit protostar als Template, die „webseite/template/deinTemplate/css/template.css“ geöffnet und folgendes eingetragen:


@media (max-width: 480px) {
#content{
padding: 0px 4px;
color: #FFF;
background: url("../images/hintergrund-480.jpg")no-repeat;
}
}

Mit diesem zusätzlichen Eintrag erreiche ich, dass bei einer Auflösung kleiner 480px, ein anderes Hintergrundbild geladen wird, wodurch das Ziel, den gesamten Content anzuzeigen, erreicht wird. Sicherhelich gibt es noch weitere Möglichkeiten, die du mir gerne schreiben kannst.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.