Rome - Hintergrundbild Größe browserabhängig / Hinweis zum scrollen

21.11.2017 14:01

tkoenig
#1

tk

Hallo allerseits!
Ich benutze auf unserer Gemeindeseite www.ilmenau-roda.de das Rome Design. Das wechselnde Hintergrundbild ist relativ groß. Mir gefällt das auch soweit, allerdings ist es bei geringeren Monitorauflösungen nicht ersichtlich, das man nach unten scrollen muss um den Content zu sehen. Gibt es irgendeine Möglichkeit, das man den Bereich des Bildes verkleinert? Eine andere Variante wäre, das es immer vollflächig dargestellt wird (egal welche Auflösung) und wie bei einem Onepager dann ein Pfeil in der Bildmitte nach unten zeigt, welcher signalisiert das weiter unten noch was kommt ? Ich hoffe, ich konnte mich einigermaßen verständlich ausdrücken

Vielen Dank schonmal vorab an die Community!
Thomas

Antworten

Beitrag melden

#2

21.11.2017 15:14 (zuletzt bearbeitet: 22.11.2017 10:57)

az_
#2

az_

...das ist eine beliebte Methode bei Rome:

Beispiel:
- https://www.pepperprint-loops.com/

aber auch Deine erste Idee ist nicht schlecht:
- https://www.paersch.com/

Problem: Lässt man die Standardeinstellung für die Hintergrundbilder (cover) kann es unschöne Effekte geben, wenn plötzlich nur noch ein Teilbereich des Bildes dargestellt wird. Bei einer dynamischen Anpassung der Bilder an das Browserfenster (...geht auch) kann es hingegen passieren, dass das Bild plötzlich z.B. nicht mehr die ganze Breite abdeckt.

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

21.11.2017 23:20

FKWars
#3

FKWars

hiermit kannst Deine erste Idee umsetzen.

1
2
3
4
5
6
7
8
9
10
11
12
13
 

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

www.crazy-terra.com

Antworten

Beitrag melden

#4

30.11.2017 09:10 (zuletzt bearbeitet: 30.11.2017 09:11)

tkoenig
#4

tk

tkoenig

Danke euch für die Hinweise!

@FKWars
damit lege ich fest, wenn die Auflösung mindestens 768 in der Breite ist, dann soll das Bild max. 550 hoch sein. Ist das richtig? Kann ich das umkehren? Mir geht es darum, das bei niedriger Auflösung (also z.B. max 768 in der Breite) das Bild nicht ganz so hoch ist wie im Original...

@az_
wie kann man sowas realisieren, wie z.B. die zentrale Schrift bzw. die beiden Buttons in Bildmitte des Hintergrundbildes wie hier:

Zitat von az_ im Beitrag #2
aber auch Deine erste Idee ist nicht schlecht:
- https://www.paersch.com/

Viele Grüße,
Thomas

Antworten

Beitrag melden

#5

30.11.2017 13:43

FKWars
#5

FKWars

"damit lege ich fest, wenn die Auflösung mindestens 768 in der Breite ist, dann soll das Bild max. 550 hoch sein. Ist das richtig? "
Das ist richtig.
Du kannst es mit

1
2
3
4
5
6
7
8
9
10
11
12
13
 

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

festlegen dass die Höhe bis 767px breite 300px höhe hat oder auch mit Änderung der (max-width: 481px) unterteilen.

www.crazy-terra.com

Antworten

Beitrag melden

#6

01.12.2017 18:16

az_
#6

az_

height: 100vh;
...geht auch - das ist dann die ganze Höhe des ViewPorts.

height: calc(100vh - 50px);
...ist dann die ganze Höhe des ViewPorts minus 50px (...ggf. der Navigation)

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