Bild über volle Breite

[Conny]

Hi,
ich probiere mit dem OnPage Composer ein Bild über die volle Breite zu bekommen wie auf der Startseite vom Standardshop - was mache ich da falsch ?

So ist es in der Demo und so würde ich es gerne hinbekommen. In der Demo ist es wohl ein Container.

 

[ARA-Marketing]

Servus... das dürfte das Portlet -> "Content" -> "Banner" sein...

VG
Eas

 

[Conny]

Hi,
Danke für deine schnelle Antwort. Nachdem ich jetzt schon ziemlich lange probiert habe, konnte ich das Problem lösen.
Ich hatte die Grafik in einen Container welcher als "boxed container" gekennzeichnet war reingelegt.

Die Grafik als Container anzuzeigen war richtig, aber man muss dann darauf Acht geben, dass dieser Container nicht gekapselt ist.

 

[Conny]

Habe noch ein kleine Problem.
Ich habe das Bild wie im letzten Post von mir zu sehen ist integriert.
Das Bild habe ich auf eine Höhe von 600px eingestellt. Damit sieht es aber auf Handy etc. nicht gut aus.
Es sollte sich responsive verhalten. D.h. wenn der Bildschirm kleiner wird müsste das Bild auch in der Höhe kleiner werden.

Irgende eine Idee wie ich das verwirklichen kann ?



sollte aber in Handygröße so aussehen

 

[MHillmann]

Hallo @Conny

was hast du denn genau vor? Wenn du wirklich nur ein Bild möchtest dann kannst du einfach ein Bild-Portlet nehmen (da brauchst du nicht mal einen Container). Ansonsten geht auch wie Eas sagt ein Banner-Portlet, das kann dann noch ein bisl mehr.

Wenn du es wirklich als Background eines Containers möchtest, müsstest du selbst noch die Höhe für die verschiedenen Browsergrößen per CSS anlegen. Der Container hat momentan leider nur eine Standardhöhe für alle Breakpoints.

Viele Grüße
Michael

 

[Conny]

Ich möchte den "parallax" Effekt nutzen und ein Bild über die gesamte Breite anzeigen.
Diesen Effekt kann ich im Banner nicht einstellen, sondern soweit ich gesehen habe nur im Container.
Das klappt jetzt auch soweit, nur ist der responsive Effect so, dass das Hintergrundbild nicht mit einer Breite von 100% darstellbar ist, was ich aber gerne hätte, da ansonsten Bereiche aus dem Bild einfach abgeschnitten werden.

 

[MHillmann]

Hier noch der Lösungsansatz aus der privaten Konversation:

gib dem Container mit dem Parallax mal eine Benutzerdefinierte Klasse im Layout-Tab. z. B. "parallax-responsive". Dann kannst du z.B. in der custom.css folgendes einfügen:

@media (max-width: 767.98px) {
    .parallax-responsive {
        min-height: 200px !important;
    }
}
@media (max-width: 991.98px) {
    .parallax-responsive {
        min-height: 300px !important;
    }
}

Viele Grüße
Michael