full_background_images

[stella]

hallo zusammen,

ich habe das Problem, dass das Background Image mit o.g. Extension auf dem Smartphone (Galaxy S4) im Landscape Modus nur bis zur Mitte angezeigt wird ... wenn man bissl hoch und runter wischt, erscheint es komplett, aber dann wieder nur halb, sehr seltsam ... kann mir da jemand helfen?

alternativ hatte ich den easy_bgstretcher getestet, aber da habe ich Schwierigkeiten, bei kleinem Content den Footer unten am ViewportRand zu halten (Tablet hochkant), der Footer ist dann irgendwo ...

der dritte Versuch war ohne Extension, mit background-size cover, aber da scheint der Hintergrund bei den Menüpunkten (normales Menü) durch trotz z-index setzen, und beim dk_mmenu wird gar das komplette Hintergrundbild im Menüpunkt angezeigt ... sehr seltsam

bin für jede Hilfe dankbar :-)

viele Grüße
Stella

[mlweb]

Link zur Seite. Meine Glaskugel versagt leider.

[tab]

Soviel erscheint mir aber klar: Wenn der Hintergrund durchscheint, dann ist der Vordergrund durchsichtig. Sei es mittels CSS (opacity oder rgba-Farben) oder weil ein eventuelles Hintergrundbild der Menüpunkte komplett oder stellenweise durchsichtig ist (möglich z.B. bei PNG oder GIF).
Mehr kann ich aber auch nicht dazu beitragen, ohne die Seite aufrufen zu können oder zumindest nähere Informationen zum CSS zu haben. Letzteres ist allerdings vom Aufwand her höher, weil eben nicht einfach die Entwicklertools des Browser eingesetzt werden können, die den Helfenden das Problem meist in wenigen Minuten erkennen und mögliche Lösungen direkt testen lassen.

[stella]

Soviel erscheint mir aber klar: Wenn der Hintergrund durchscheint, dann ist der Vordergrund durchsichtig. Sei es mittels CSS (opacity oder rgba-Farben) oder weil ein eventuelles Hintergrundbild der Menüpunkte komplett oder stellenweise durchsichtig ist (möglich z.B. bei PNG oder GIF).
Mehr kann ich aber auch nicht dazu beitragen, ohne die Seite aufrufen zu können oder zumindest nähere Informationen zum CSS zu haben. Letzteres ist allerdings vom Aufwand her höher, weil eben nicht einfach die Entwicklertools des Browser eingesetzt werden können, die den Helfenden das Problem meist in wenigen Minuten erkennen und mögliche Lösungen direkt testen lassen.

danke für Deine Antwort
der Vordergrund ist NICHT durchsichtig, das Problem ist, dass Contao die body class ans Menue vererbt, im body ist ein background Bild gesetzt, das wird dann auch in dem Menue gesetzt, bei den mmenu Punkten komplett als Hintergrundbild

ich habe das erst später gesehen, habe nun full-background-images eingesetzt, das funktioniert ganz gut, aber der hat die o. g. Probleme mit Smartphone (wird nur halb angezeigt im Landscape Modus)

viele Grüße
stella

Link: amler-ingenieure.de

[mlweb]

das Problem ist, dass Contao die body class ans Menue vererbt, im body ist ein background Bild gesetzt, das wird dann auch in dem Menue gesetzt, bei den mmenu Punkten komplett als Hintergrundbild

Das kann man ja durch entsprechendes css umgehen

body.meineklasse {
background: ...;
}

[Andreas]

Die Vererbung der Seitenklassen ans Menü dürfte kein Problem sein. Du darfst das CSS dann nicht direkt auf die Klasse - Beispiel: .kontakt - aufsetzen, sondern nur dort, wo es gebraucht wird. Beispiel: body.kontakt o. .kontakt .my-bg-element.

[full-background-images] macht da sehr viel Berechnungen mit JS, beispielsweise die Größe von .backstretch neu zu berechnen. Für ein einfaches Hintergrundbild scheint mir das unnötig. Dein HTML sieht momentan so aus.

<div class="backstretch" style="left: 0px; top: 0px; overflow: hidden; margin: 0px; padding: 0px; height: 515px; width: 1802px; z-index: -999999; position: fixed;">
  <img style="position: absolute; margin: 0px; padding: 0px; border: medium none; width: 1802px; height: 1367.12px; max-height: none; max-width: none; z-index: -999999; left: 0px; top: -426.059px;" src="files/images/hg_leistungen.jpg" alt="hg leistungen" title="hg leistungen">
</div>
<script type="text/javascript">
    window.addEventListener("load-fullbg", function() {
        ;(function($){
            $(document).ready(function() {
                $.backstretch(
                    'body',
                    [{"src":"files\/images\/hg_leistungen.jpg","alt":"hg leistungen","title":"hg leistungen","caption":null}],
                {
                    caption: false,
                    duration: 0,
                    fade: 0,
                    nav: false,
                    navClick: false,
                    navPrevNext: false,
                    centeredX: true,
                    centeredY: true
                });
            });
        })(jQuery);
    });
</script>

Zusätzlich wird dann noch jquery.backstretch.min.js geladen.

Probiere mal bitte, ob das auf Smartphones mit diesem Code funktionieren würde.

<div class="full-bg-img"></div>

/* CSS */

.full-bg-img {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(http://amler-ingenieure.de/files/images/hg_leistungen.jpg);
  background-size: cover;
  background-position: center;
  z-index: -1;
} 

Das HTML kann irgendwo im Layout eingebunden werden, z.B. im Footer am Ende. Das CSS in deine CSS-Datei.

[mlweb]

Ich verlinke mal hier den Thread zu den Problemen mit dem Einsatz der Erweiterung https://community.contao.org/de/show...-abgeschnitten

[stella]

@Andreas
danke! das mit Deinem HTML und CSS hat nicht g'scheit funktioniert, da wird dann der Footer bei einem kleinen Content irgendwo hingesetzt, nur nicht untenhin ...
aber der Hinweis mit der body class war super
@mlweb
der auch von Dir kam, danke!

und es stimmt schon, warum eine Extension, wenn es anders geht ... werde das noch auf BS 2500px Breite testen und dann in die Seite einbauen

bleibt trotzdem noch die Frage, warum full-background-images auf Smartphone landscape abschneidet, vielleicht brauche ich den ja doch mal irgendwann

viele Grüße
stella

[Andreas]

@Andreas
danke! das mit Deinem HTML und CSS hat nicht g'scheit funktioniert, da wird dann der Footer bei einem kleinen Content irgendwo hingesetzt, nur nicht untenhin ...

Das kann nicht sein. Der Footer hat damit nichts zu tun, wenn du irgendwo ein Element mit position:fixed; hast, dann ist es losgelöst von seinen Elternelementen und sein CSS beinflusst dann auch nicht das CSS anderer Elemente. Evtl. hast du das CSS nicht eingebunden. Zeig doch bitte mal die Seite mit dem Versuch.

bleibt trotzdem noch die Frage, warum full-background-images auf Smartphone landscape abschneidet, vielleicht brauche ich den ja doch mal irgendwann

Kann sein, dass die Neuberechnung per JS auf dem Smartphone beim Wechsel nach Landscape nicht angestoßen wird. Mit der CSS-Lösung hättest du so ein Problem nicht.

[stella]

hallo Andreas,
irgendwie bekomme ich das jetzt nicht mehr hin ... ich hatte unter KONTAKT Artikel ein HTML angelegt mit - wie Du gesagt hast - <div class="full-bg-img"></div> und das CSS von Dir übernommen in meines ... jetzt kommt gar kein Bild mehr ... ach so, das mit dem Footer war, als ich statt HTML Artikel ein Bild mit der Klasse angelegt habe ...

aber ist ja jetzt auch egal, ich werde - wie schon gesagt - body.kontakt (body.leistungen etc.) mit Background versehen, das klappt wunderbar

vielen Dank für Deine Hilfe
vg
stella

[Andreas]

Hallo stella, schön, dass du ne Lösung gefunden hast.

Ich wollte trotzdem nochmal auf meine Lösung eingehen, könnte ja ne Alternative sein. Da hatte ich aus Versehen aus meinem CSS das top:0; anstatt das left:0; entfernt. Habe es oben korrigiert.

Meine Lösung war gedacht, um dann dynamisch ein Bild, welches man in den Seiteneinstellungen auswählt, als Hintergrundbild zu zeigen.

Mir ist noch eingefallen, dass man dazu noch nicht mal ein eigenes Element benötigt.

So müsste das CSS aussehen.

body::after {
    content: '';
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    background-size: cover;
    background-position: center;
    z-index: -1;
} 

Und dann z.B. in einem j_Template (Beispiel: j_bg-image.html5) im Layout das hier:

<?php
// Fallback image
$bgImgPath = 'files/images/hg_leistungen.jpg';

global $objPage;
// hole Seitenbild von Seite $objPage->id
// falls vorhanden dann $bgImgPath = der ermittelte Pfad

$GLOBALS['TL_HEAD'][] = '
  <style>
    body::after {
      background-image: url('.$bgImgPath.');
    }
  </style>
';

Wenn man in den Seiteneinstellungen kein Bild auswählen kann, dann kann man dem Redakteur auch anbieten ein Bild mit dem Alias oder der ID der Seite anzulegen, welches dann mit PHP gesucht wird und wenn vorhanden benutzt wird.

Beispiele:
files/css/img/bg-kontakt.jpg
oder
files/css/img/bg-page-42.jpg