[mobile Version] Hintergrund fixieren

Hallöchen liebes Team von Forumieren!

Vorweg! Ich finde das neue Mobile-Theme klasse - hat mich heute Morgen zwar etwas überrascht, als ich unterwegs online gehen wollte und die Mobile Version reichlich geschrottet aussah, aber das ließ sich im Adminbereich ja schnell beheben. Ich bin da aktuell auch fleißig am Anpassen und es funktioniert auch noch nicht alles (die Avatare auf der Startseite und dass die neuen Beiträge auch makiert werden), doch stoße ich gerade auf ein Problem welches sich so nicht ganz beheben lassen will.

Und zwar geht es dabei um den Hintergrund des Forums, welcher ja nun auf der Mobilen Version auch angezeigt wird. An sich mag ich die Idee, doch bleibt das Bild dort nicht fixiert, sondern scrollt immer wieder mit runter und endet dann in einem unschönen weiß.

Das ganze sieht dann so aus:

Spoiler:

Ich vermute ein wenig, dass es am CSS Code liegen könnte, den wir zur Fixierung des Hintergrundes verwenden:

Code:


body {
background: url(http://i84.servimg.com/u/f84/15/51/63/00/backgr10.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i84.servimg.com/u/f84/15/51/63/00/backgr10.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i84.servimg.com/u/f84/15/51/63/00/backgr10.jpg', sizingMethod='scale')";
}


Der Code stammte von unserer Admina, die ihn damals eingesetzt hat - sollte der also imens falsch sein, dann tut es mir Leid. ^^;

Ich hatte es auch bereits mit dem Code von inde <hier> versucht:

Code:


/*automatische Größen-Anpassung des Hintergrunds an die jeweilige Desktop-Auflösung*/
body {
background-attachment: fixed;
background-image: url(http://i84.servimg.com/u/f84/15/51/63/00/backgr10.jpg);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 100% auto;
}


Damit sieht das ganze auf der Mobile Version allerdings noch weniger passend aus:

Spoiler:

Gibt es da vielleicht eine elegante Lösung das Bild auf der Mobilen Version anzupassen? Oder ein sperates Bild zu nutzen, welches in der Mobilen Version genutzt wird?

Grüße,
Dreami

Bitte versuch mal was passiert, wenn du in dein CSS diesen Eintrag hinzufügst:

Code:

html, body {
    color: #transp;
}

einträgst.
Es kann sein, das das schon hilft.
Die anderen Einträge die du oben gepostet hast, kannst du wieder entfernen.

Hallo!

Nun habe ich in der Mobilen Version gar keinen Hintergrund mehr - und das Bild auf der Webseite selbst ist nicht mehr komplett zu sehen. :/

Greetz,
Dreami

Das Problem ist, das in der Mobilen Version das Hintergrundbild im unteren Teil von einer Hintergrundfarbe überdeckt wird.
Kannst du bitte noch mal diesen CSS Code versuchen?

Code:

html, body {
    background-color: transparent !important;
}

Hallo!

Der Code hat im Prinzip das selbe bewirkt wie der obrige - in testweiser Kombination mit dem ersten Code hat er dann zwar in der Mobilen Version alles komplett angezeigt (den Hintergrund sogar doppelt, aber das ließe sich verkraften), doch die Hintergrundfarbe unserer Chatbox gekillt. Durch ein bisschen rumprobieren und einem kleinen aber feinen "!important" hinter der Angabe für die Chatboxfarben, hat es nun geklappt, dass die Chatbox und der Hintergrund in der Desktop Version normal bleiben, die Mobile Version mit dem Hingrund allerdings einwandfrei funktioniert.
Dankesehr für die schnelle Hilfe! :3

Einen schönen Abend, wünsche ich noch!

Greetz,
Dreami

Gut, das es so geklappt hat.
Wobei der Hintergrundbereich mit dieser Class in beiden Versionen vorhanden ist.
Ich habe mich noch nicht so eingehend damit beschäftigt um zu schauen, welche CSS Classen in der Mobilen Version vorhanden sind.

Nun noch ein Tip, für alle die am PC mit Firebug arbeiten und damit die Mobilversion testen wollen.
Ihr solltet euch dieses AddOn installieren:
https://addons.mozilla.org/de/firefox/addon/user-agent-switcher/
Damit könnt ihr am PC den Browser so einstellen, als ob er ern Mobilgerät ist.
Somit kann dann euer Forum auch in der Mobilen Ansicht angezeigt werden und ihr könnt mit Firebug direkt die CSS Classen anschauen und bearbeiten.

Übrigens wer es noch nicht gesehen hat, es ist auch möglich die Templates der Mobilen Version zu personalisieren.
Schaut mal unter den Templates nach.

Da das hier als erledigt markiert ist, schließe ich hier.