Hintergrundbild skaliert nicht

  • Hallo zusammen,


    beim Erstellen Clean Style Responsive - Clean habe ich unter "Layout" bei "Allgemein" eine Hintergrundgrafik eingestellt. Leider verhält sich dieser Hintergrund nicht "Responsiv", sondern das Bild wird einfach an den Rändern gekürzt, sodass ich nur einen Ausschnitt sehe.


    Grafiken in einem Container verhalten sih wie gewünscht.


    Kann man da was machen? Die Themen hier im Forum haben mir leider auch nicht weitergeholfen.


    Ich nutze die Version 14.


    Danke schon mal vorab.


    Mit freundlichen Grüßen

    Sascha

    Viele Grüße

    Sascha


    _____________________________________________

    Version 14.2.0 Business

    Vorlage "Flat Responsive"

  • Hallo,


    bitte mal die Web-Adresse hier hinzufügen, damit wir das online sehen und prüfen können.

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

  • Hallo,


    noch hatte ich sie nicht online, da ich ganz am Anfang bin.


    Hier ist sie aber nun: http://www.angel-tipps.de/test/


    Wie gesagt, es geht nur um das Hintergrundbild, dass nicht mit skaliert und aufgrund der Größe des Originalbildes auch nur einen Ausschnitt des Gesamtbildes auf einem "normalen" Monitor zeigt.


    Mit freundlichen Grüßen

    Sascha

    Viele Grüße

    Sascha


    _____________________________________________

    Version 14.2.0 Business

    Vorlage "Flat Responsive"

  • Hallo,


    das Hintergrundbild bei diesem Layout wird standardmäßig nicht skaliert, sondern kann nur wiederholt werden (kacheln).


    Mit etwas eigenem CSS können Sie das aber anpassen.


    Bitte mal folgende Seite durchlesen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html


    Folgender CSS-Code sollte dann helfen:

    Code
    1. <style>
    2. body {
    3. background-attachment: fixed;
    4. background-position: top center;
    5. background-size: cover;
    6. }
    7. </style>

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

  • Hallo


    Vielen Dank für den Code und den Tipp.


    Leider greift das bei mir nicht.


    Ich habe das Gefühl, dass ich irgendetwas beim Einfügen des CSS Codes falsch mache. Auch andere Codes, die ich mal probiert habe, greifen nicht.


    Ich habe das Ergebnis noch einmal hochgeladen. Im Quelltext findet man den Code wieder, aber skaliert wird nur in dem Container.


    Ich habe ihn, wie im Link beschrieben eingefügt.


    Ist es die falsche Stelle?


    Mit freundlichen Grüßen

    Sascha

    Viele Grüße

    Sascha


    _____________________________________________

    Version 14.2.0 Business

    Vorlage "Flat Responsive"

  • Hallo,


    ich glaube, wir sprechen aneinander vorbei.


    Die Eingabe des Codes hat keinerlei Veränderung gebracht.


    Ich spreche von der Hintergrundgrafik. Die Hintergrundgrafik skaliert nicht. Sie zeigt eine je nach Auflösung des Monitors einen Ausschnitt aus dem Bild.


    Das Bild im Container ist nur zum Vergleich eingefügt. Es zeigt das Gesamtbild, wie ich es gerne als Hintergrundgrafik sehen würde... und zwar komplett und skalierbar.


    Mit freundlichen Grüßen

    Sascha

    Viele Grüße

    Sascha


    _____________________________________________

    Version 14.2.0 Business

    Vorlage "Flat Responsive"

  • Von was für einen Container sprechen Sie da? Auf der Website, die Sie genannt haben ist auf der Startseite ein Header drin (nach Hier skaliert es wunderbar), aber kein Container.


    Das gleiche Bild haben Sie dann auch als Hintergrundbild für die gesamte Seite eingestellt. Nach Eingabe des CSS-Codes wird dieses nun komplett skaliert angezeigt (siehe Bildanhang).

  • Hallo,


    Sie müssen entschuldigen, wenn ich da einige Begrifflichkeiten durcheinander bringe, aber Ihr Bild ist sehr hilfreich.


    Das "kleine Bild" ist also im Header und nicht im Container. Ich werde mich diesbezüglich noch besser einlesen.


    Wahrscheinlich ist auch meine Begriff "skalieren" nicht korrekt.


    In Ihrem Screenshot erkennt man wunderbar, dass nicht der gewünschte Effekt auftritt.



    Das Bild, dass sich im Header befindet, ist "vollständig". Wenn ich nun mein Browserfenster verkleinere, bleibt auch das Bild vollständig.


    Nicht so das Hintergrundbild. Dieses Bild ist je nach Auflösung nur ein Ausschnitt aus dem gesamten Bild und wenn ich das Fenster verkleinere, bleibt die Auflösung des Bildes gleich, aber der Ausschnitt verkleinert sich.


    Ich habe mal 2 Dateien angehängt, die zeigen, dass das Hintergrundbild sich nicht "verkleinert" wie das Bild im Header.

    Ich würde mir wünschen, das Hintergrundbild in voller Größe zu sehen und wenn ich das Fenster verkleinere soll es komplett bleiben und sich so verhalten, wie das Bild im Header... Also kleiner werden...


    Vielleicht geht das ja gar nicht, aber das war von Anfang an mein Ansinnen :)


    Mit freundlichen Grüßen

    Sascha





    Viele Grüße

    Sascha


    _____________________________________________

    Version 14.2.0 Business

    Vorlage "Flat Responsive"

  • Momentan wird das Bild so skaliert, dass immer das komplette Fenster damit lückenlos ausgefüllt wird. Wie ist denn die Gewünschte Skalierung? Immer das komplette, unbeschnittene Bild zeigen und dann ggf. unten einen weißen Rand lassen, falls das Browserfenster höher als das Bild ist?

  • Genau, immer das komplette, unbeschnittene Bild und unten einen Rand (ideal wäre schwarz...Das wäre aber das i-Tüpfelchen).


    Zur Information... Das Bild ist noch nicht optimal und nur zum Testen gedacht. Ich werde ein Bild auswählen, dass wie ein Banner wirken soll, aber doch ein Bild sein soll.


    Es soll relativ schmal am oberen Rand zu sehen sein und nach unten in schwarz übergehen... Ein Farbverlauf wäre auch toll, aber schon das absolute I-Tüpfelchen...

    Viele Grüße

    Sascha


    _____________________________________________

    Version 14.2.0 Business

    Vorlage "Flat Responsive"

  • OK, dann stellen Sie in den Layout-Einstellungen, da wo Sie auch das Hintergrundbild eingestellt haben, die Hintergrundfarbe auf die gewünschte Farbe. Anschließend ersetzen Sie im CSS von Kollege T. das Wort cover durch das Wort contain

  • Hallo!


    Kleine Ursache, riesige wirkung.


    Das war es!


    1000 Dank für diesen super Support :)


    Sascha

    Viele Grüße

    Sascha


    _____________________________________________

    Version 14.2.0 Business

    Vorlage "Flat Responsive"