Support » Allgemeine Fragen » Graue Fläche hinter Text legen

  • Gelöst j93579

    (@j93579)


    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)
  • 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-Ersteller 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 geändert vor 6 Monaten, 1 Woche von j93579.

    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-Ersteller j93579

    (@j93579)

    Meinst Du „none“ oder „fixed“?

    none 🙂

    Aber ich sehe es funktioniert 🙂

    • Diese Antwort wurde geändert vor 6 Monaten, 1 Woche von Heiko.

    @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-Ersteller 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-Ersteller 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-Ersteller 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-Ersteller j93579

    (@j93579)

    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.