Graue Fläche hinter Text legen | WordPress.org Deutsch

Gelöst j93579
(@j93579)

vor 2 Jahren, 10 Monaten

Guten Abend zusammen,

damit der Text auf meiner kleinen Website besser zu lesen ist, habe ich die einzelnen Hintergrundbilder gerade so angepasst, dass die mittleren 50% des Bildes etwas abgedunkelt sind, rechts und links bleiben jeweils 25% nicht abgedunkelt. Das hielt ich zunächst für eine gute Idee. Auf meinem MacBook sieht das alles schön aus. Auf meinem WIN 10 PC hat jedes Bild – abhängig von der Textmenge – aber eine andere Größe und die Bilder scrollen sogar mit.

Habt Ihr eine Idee, wie ich die Bilder so fixieren kann, dass sie auf keinem Gerät mitscrollen? Damit dürfte das Problem doch behoben sein oder? Oder habt Ihr eine andere Idee, wie ich das Problem lösen könnte?

Freue mich über jeden Tipp.

Viele Grüße und vielen Dank
JS

Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)

Heiko
(@ada2go)

vor 2 Jahren, 10 Monaten

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)

vor 2 Jahren, 10 Monaten
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 geändert vor 2 Jahren, 10 Monaten von j93579.
Heiko
(@ada2go)

vor 2 Jahren, 10 Monaten
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)

vor 2 Jahren, 10 Monaten

Meinst Du „none“ oder „fixed“?
Heiko
(@ada2go)

vor 2 Jahren, 10 Monaten
none 🙂

Aber ich sehe es funktioniert 🙂
- Diese Antwort wurde geändert vor 2 Jahren, 10 Monaten von Heiko.
Moderator Angelika Reisiger
(@la-geek)

vor 2 Jahren, 10 Monaten
@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.
Moderator Bego Mario Garde
(@pixolin)

vor 2 Jahren, 10 Monaten

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)

vor 2 Jahren, 10 Monaten

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
Moderator Angelika Reisiger
(@la-geek)

vor 2 Jahren, 10 Monaten
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)

vor 2 Jahren, 10 Monaten

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)

vor 2 Jahren, 10 Monaten

Es hat alles ganz prima geklappt.
Vielen Dank für alle Lösungen!
Moderator Angelika Reisiger
(@la-geek)

vor 2 Jahren, 10 Monaten
@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)

vor 2 Jahren, 10 Monaten

Vielen Dank, hat alles funktioniert!

Ansicht von 13 Antworten - 1 bis 13 (von insgesamt 13)

Das Thema „Graue Fläche hinter Text legen“ ist für neue Antworten geschlossen.

Ansichten