Hallo Jan,
ich habe mir deine Seite angeschaut, für die Fixierung kannst du im CSS das Attribut „background-attachment“ nutzen:
background-attachment:fixed;
Ich habe es mal in deinen Code eingebaut:
style="background-image:url(https://www.janschlesinger.de/wp-content/uploads/2021/05/WP3_2_2.jpg);background-color:#3b4d59;min-height:100vh;background-attachment:fixed;"
Ich finde auf der Seite keine Angaben über die Breite oder ähnliches, kannst du mir sagen, welchen Code du verwendest, um die Bilder abzudunkeln und die Größe einstellst?
Grüße
Heiko
Thread-Starter
j93579
(@j93579)
Hallo Heiko,
vielen Dank für Deine Antwort. Das werde ich einmal ausprobieren.
## Ergänzung: Es funktioniert leider nicht. Der Code-Editor nimmt die Änderungen nicht an, sondern überschreibt sie direkt wieder ##
Ich habe die Bilder alle manuell in gimp abgedunkelt und anschließend hochgeladen. Also kein Code im Einsatz. Meinst Du das?
Viele Grüße
JS
-
Diese Antwort wurde vor 4 Jahren, 10 Monaten von
j93579 geändert.
Hallöchen,
ja das meinte ich, die Information hat gefehlt und dann geht das alles sogar noch einfacher:
Schreib mal in dein benutzerdefiniertes CSS:
.wp-block-cover-image.has-parallax, .wp-block-cover.has-parallax {
background-attachment: none !important;
}
Dadurch sollten die Bilder wieder „ordentlich“ angezeigt werden und auch das fixieren klappen 🙂
Thread-Starter
j93579
(@j93579)
Meinst Du „none“ oder „fixed“?
none 🙂
Aber ich sehe es funktioniert 🙂
-
Diese Antwort wurde vor 4 Jahren, 10 Monaten von
Heiko geändert.
@j93579
wenn es dir darum geht, dass der dunkel hinterlegte Bereich in der Mitte immer den Text umschließt und nicht der Text darüber hinausfließt, dann verwende die Originalfotos, also die Fotos VOR der Gimp-Bearbeitung und füge im Customizer -> Zusätzliche CSS das folgende ein (die 0.5 bei rgba(0,0,0,0.5) kannst du anpassen also rgba(0,0,0,0.8) würde es weiter abdunkeln und vice versa.
@media only screen and (min-width: 769px) {
.wp-block-cover .wp-block-cover__inner-container {
max-width: 600px!important;
width: 100% !important;
background: rgba(0,0,0,0.5);
padding: 40px;
}
.wp-block-cover .wp-block-cover__inner-container * {
width: 100% !important;
max-width: 520px !important;
min-width: 100% !important;
}
.entry-content .wp-block-cover:first-child .wp-block-cover__inner-container {
background: none;
}
}
Dann kannst du die Hintergrundbilder auch fixiert lassen.
Wieso nicht per Block-Einstellungen?
Im Cover-Block lässt sich doch einstellen, dass der Hintergrund fixiert und mit einem Farboverlay versehen werden soll.
Das Portrait am Ende der Seite scheint mir etwas groß geraten und wirkt durch die starke Vergrößerung (Original 200 x 200px, Darstellung 788 x 788 px) zumindest auf meinem Laptop recht flau und unscharf.
Thread-Starter
j93579
(@j93579)
Hallo Angelika,
vielen Dank, das läuft genau auf das raus, was ich gerne hätte. Ich habe Deinen Code übernommen und lediglich
max-width: 600px!important; mit
max-width: 70%!important; ausgetauscht.
Nun ist aber mein Foto am unteren Ende der Seite riesig. Hast Du hier ggf. noch einen Tipp?
Vielen Dank für Deine wunderbare Hilfe.
Viele Grüße
JS
Hallo @j93579
trage bei den Blöcken Cover die diesen schwarz-transparenten Hintergrund haben sollen in der rechten Seitenspalte unter „Zusätzliche CSS-Klasse(n)“ ein blackbg
Ändere anschl. den CSS-Code von oben um, in:
@media only screen and (min-width: 769px) {
.wp-block-cover.blackbg .wp-block-cover__inner-container {
max-width: 600px!important;
width: 100% !important;
background: rgba(0,0,0,0.5);
padding: 40px;
}
.wp-block-cover.blackbg .wp-block-cover__inner-container * {
width: 100% !important;
max-width: 520px !important;
min-width: 100% !important;
}
}
Thread-Starter
j93579
(@j93579)
Vielen Dank, das probiere ich später gleich aus.
Gebe es noch eine „einfache“ Möglichkeit, die dunklen Flächen ganz oben oder ganz unten anstoßen zu lassen? Oder müsste dafür mehr Aufwand betrieben werden?
Viele Grüße
JS
Thread-Starter
j93579
(@j93579)
Es hat alles ganz prima geklappt.
Vielen Dank für alle Lösungen!
@j93579
Super, danke für die Rückmeldung.
Umd die Abstände oben und unten zu entfernen, müsstest du erst einmal die leeren Absatz-Blöcke (direkt über den Cover-Blöcken) löschen und dann den obigen Code durch den folgenden ersetzen
@media only screen and (min-width: 769px) {
.wp-block-cover.blackbg .wp-block-cover__inner-container {
max-width: 60%!important;
width: 100% !important;
background: rgba(35,35,35,0.8);
padding: 60px 40px;
margin: 0 auto;
}
.wp-block-cover.blackbg .wp-block-cover__inner-container * {
width: 100% !important;
max-width: 520px !important;
min-width: 100% !important;
}
.wp-block-cover.blackbg {
padding-top: 0;
padding-bottom: 0;
}
}
Thread-Starter
j93579
(@j93579)
Vielen Dank, hat alles funktioniert!
