Design Stockholm - Titelbild auf ganzen Bildschirm darstellen

Antworten
#1
30.05.2017 23:38
avatar  Starty
#1
St
Starty

Hallo zusammen,

wie kann ich das Titelbild auf den Unterseiten genauso darstellen wie auf der Startseite?
Das Titelbild soll in der Breite und Höhe 100 % einnehmen.

Kenn jemand eine Lösung?
Vg Starty


 Antworten

 Beitrag melden
#2
31.05.2017 08:09 (zuletzt bearbeitet: 31.05.2017 08:34)
avatar  az_
#2
avatar
az_

...versuch mal:

1
2
3
4
5
6
 

.jtpl-header.jqbga-container, .jqbga-web--image, .jqbga-slider {
    height: calc(100vh - 50px);
}
 

 



Das gilt für Bilder und für Slider - die Navigation (=50px) wird von 100vh abgezogen. Die Breite ist durch background-size vorgegeben, die ist standardmäßig auf "cover" eingestellt.

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
07.08.2017 00:49 (zuletzt bearbeitet: 09.08.2017 06:56)
avatar  Starty
#3
St
Starty

Mein aktueller Code - wie muss ich diesen ändern, sodass das Titelbild den Bildschrim komplett ausfüllt?
Auf der Startseite ist dies bereits der Fall....

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 

<style type="text/css">
/*<![CDATA[*/
 
.jtpl-header--image {
	height: 900px!important;
}
 
.jtpl-sidebar {
	padding: 10px 20px!important;
}
 
.jtpl-breadcrumb,
.jtpl-content,
.jtpl-footer__inner,
.jtpl-header__inner,
.jtpl-sidebar__inner {
	max-width: 1250px!important;
}
 
@media (min-width: 760px) {
	.content-options-inner .j-imageSubtitle figcaption,
	.content-options-inner .j-textWithImage figcaption,
	.cc-catalog-container-new .cc-catalog-galleryview .cc-webview-product,
	.cc-imagewrapper figcaption {
		width: auto !important;
		background-color: rgba(150, 150, 150, 0.81);
		color: #fff;
		bottom: 0px !important;
		position: absolute !important;
		padding: 10px!important;
	}
/*]]>*/
</style>
 

 


 Antworten

 Beitrag melden
#4
09.08.2017 06:41 (zuletzt bearbeitet: 09.08.2017 07:10)
avatar  az_
#4
avatar
az_

Bitte benutz die SF für CODE , wenn Du CODE im Forum postest!!!

Den Code, den ich Dir geschrieben habe, kannst Du entweder in den Block integrieren (unter der letzten Anweisung einsetzen) oder standalone unter dem Block einsetzen. Bei letzterer Lösung natürlich wieder zwischen <style> und </style>.

LG, az


TIPP: Jede Klammer, die Du öffnest, musst Du auch wieder schliessen. Sonst funktioniert Dein CSS-Code nicht.
Ein CSS-Editor hilft Dir dabei: https://codebeautify.org/css-beautify-minify


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
#5
05.12.2017 20:28
avatar  Starty
#5
St
Starty

Danke für den Hinweis! Leider klappt das auf dieser Seite nicht :/ Woran kann das liegen?

https://www.speedfussball-akademie.de/le...gkeitstraining/


 Antworten

 Beitrag melden
#6
09.12.2017 20:50
avatar  az_
#6
avatar
az_

...wieso, sieht doch gut aus?

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
#7
09.12.2017 20:52
avatar  Starty
#7
St
Starty

Bei kleineren Bildschirmen klappt das, da 900 px eingestelt worden sind. Bei größeren Bildschirmen fällt das dann eben auf.


 Antworten

 Beitrag melden
#8
14.12.2017 20:10
avatar  az_
#8
avatar
az_

1
2
3
 
.jtpl-header--image {
    height: 100vh!important;
}
 



...geht auch nicht?


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!