Rome: Hintergrundbilder vollformatig und mobile-Ansicht besser

Antworten
#1
26.06.2018 11:17
avatar  Focuswelten
#1
Fo
Focuswelten

Hallo!

Ich höre auf den Namen Beppo und bin ganz neu hier im Forum. Ich hoffe, dass ich auch einmal etwas zum Forum beitragen kann, aber momentan kämpfe ich noch mit den "Feinheiten" von Jimdo.

Folgendes Problem: Es geht um diese Seite: https://focuswelten-life-reportagen.jimdofree.com/

Ich möchte gerne die Hintergrundbilder vollformatig haben. Das habe ich auch mit folgendem Header-Code geschafft:

1
2
3
4
5
6
7
8
9
10
11
 

<style type="text/css">
/*<![CDATA[*/ 
@media (min-width: 768px)  {
.jtpl-header--image {
height: 980px;
}
}
/*]]>*/ 
</style>
 
 



bzw. hiermit

1
2
 
.jtpl-header--image {
height: calc(100vh); 
 



Mein Problem ist nur, dass dann die Ansicht bei Mobilgeräten im Hochformat nur einen uninetressanten/zufälligen Ausschnitt zeigt. Gibt es eine Möglichkeit die mobile Voransicht besser zu steuern, so dass die Bilder nur verkleinert dargestellt werden?

Tausend Dank schon mal!

Beppo


 Antworten

 Beitrag melden
#2
04.07.2018 09:09 (zuletzt bearbeitet: 04.07.2018 09:16)
avatar  az_
#2
avatar
az_

...das kannst Du mit CSS Einstellungen für den background erreichen, z.B.:

1
2
3
4
5
6
7
8
9
 

@media (max-width:767px) {
    .jqbga-slider--image, .jqbga-web--image {
        background-repeat: no-repeat;
        background-position: center 150px !important;
        background-size: 100%;
    }
}
 
 




LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#3
05.07.2018 06:23
avatar  Focuswelten
#3
Fo
Focuswelten

Perfekt! Danke :-)


 Antworten

 Beitrag melden
#4
30.08.2018 09:08
avatar  Eny
#4
En
Eny

Guten Morgen Beppo,
ich bin gerade auf Deinen Beitrag gestoßen und habe mir auch Deine Seite angesehen - sieht super aus! Darf ich Dich fragen, wie Du es hinbekommen hast, dass zwischen den Textteilen immer mal wieder das Hintergrundbild durchkommt? Bitte entschuldige meine laienhafte Ausdrucksweise, ich bin noch recht neu hier....
VG Verena


 Antworten

 Beitrag melden
#5
01.09.2018 20:16 (zuletzt bearbeitet: 01.09.2018 20:29)
avatar  az_
#5
avatar
az_

...das sind fixierte Hintergrundbilder. Macht man mit der CSS-Anweisung "background-position: fixed" Ist aber auf iOS-Geräten oft fehlerhaft, da diese das nicht unterstützen. Zudem ist die Größen-Einstellung "cover" für die Bildgröße bei mobileen geräten oft nicht optimal:




Lösung: ein Skript als "Browserweiche" einsetzen.

Beispiel: https://www.praxis-bungeroth.de/



Bei iOS-Geräten wird die background-position damit automatisch wieder auf "scroll" gesetzt. Der Bildausschnitt kann dann auch verbessert dargestellt werden, zB background-size: 100vw auto;

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
#6
05.09.2018 09:12
avatar  Focuswelten
#6
Fo
Focuswelten

Hallo,

ich war jetzt lange im Ausland und schlege mich erst jetzt wieder mit dem Parallax-Problem herum (siehe meine heutige Forumsanfrage wegen der schlechten iOS-Darstellung - evtl. beinhaltet der letzte Post hier ja schon meine Antwort). Danke schon mal dafür.

Zur Frage, wie ich das mit den fixierten HG-Bildern gemacht habe, kann ich am Besten auf das Tutorial verweisen: https://support.jimdo.com/faq/how-to-mak...th-backgrounds/

Beste Grüße - Beppo


 Antworten

 Beitrag melden
#7
05.09.2018 18:48
avatar  Focuswelten
#7
Fo
Focuswelten

Hallo,

Hallo,

hiermit scheint das iOS-Problem gelöst zu sein: https://expanding.jimdo.com/hacks/fix-io...ackground-zoom/

Ich teste noch weiter, aber erstmal sieht es gut aus :-)

Beppo


 Antworten

 Beitrag melden
#8
15.09.2018 12:11
avatar  Eny
#8
En
Eny

Hallo Beppo,
vielen Dank für Deine Rückmeldung - ich hangel mich gerade durch den Link.... In welcher Größe hast du deine Bilder angelegt? Bei mir wird das Hintergrundbild oben immer abgeschnitten.
VG Eny


 Antworten

 Beitrag melden
#9
15.09.2018 17:12 (zuletzt bearbeitet: 15.09.2018 17:12)
avatar  az_
#9
avatar
az_

...der Tipp mit dem modernizr funktioniert zwar, aber ist nicht wirklich zu empfehlen. Besser ist es, ein schmaleres jQuery-Script zu benutzen. Bildausschnitte kannst Du mit der background-postition einstellen (CSS s.o.)

LG, az


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!