JARVIS
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.
Interessiert in verschiedenste IT Themen, schreibe ich in diesem Blog über Software, Hardware, Smart Home, Games und vieles mehr. Ich berichte z.B. über die Installation und Konfiguration von Software als auch von Problemen mit dieser. News sind ebenso spannend, sodass ich auch über Updates, Releases und Neuigkeiten aus der IT berichte. Letztendlich nutze ich Taste-of-IT als eigene Dokumentation und Anlaufstelle bei wiederkehrenden Themen. Ich hoffe ich kann dich ebenso informieren und bei Problemen eine schnelle Lösung anbieten. Wer meinen Aufwand unterstützen möchte, kann gerne eine Tasse oder Pod Kaffe per PayPal spenden – vielen Dank.