1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

WP 5.x Seitenhintergrund transparent

Dieses Thema im Forum "Design" wurde erstellt von Ragili, 14. Mai 2019.

  1. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    Hey,
    ich überlege das Layout der Webseite, die ich mitbetreue, zu verändern.

    Eine Idee ist den Seitenhintergrund transparent zu machen und ein Foto als Haupthintergund zu haben.

    Ich bekomme das aber nicht hin, ich hab schon verschiedenes in der zusätzlichen CCS eingetragen aber nichts funktioniert. Kann mir jemand helfen?

    webseite: nicoleweinauge.de Theme Quicksand

    Viele Grüße Ragili
     
  2. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Teste doch mal so was in der Art...(im zusätzlichen CSS)
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Die URL zu Bild musst du natürlich noch anpassen... hab da einfach das erste Bild eingetragen, dass ich auf der Seite gefunden habe
     
  3. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    Vielen Dank!
    Aber das meine ich nicht. Das Hintergrundbild kann ich einfügen. Aber man kann es nicht sehen, weil die Seite weiß ist. Die Seite muss also transparent werden, damit man das Bild sehen kann.

    https://nicoleweinauge.de/philosophie/ z.B. hier die Überschrift und der Text

    [​IMG]
     
    #3 Ragili, 14. Mai 2019
    Zuletzt bearbeitet: 14. Mai 2019
  4. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Mit ...'die Seite weiß ist'... meinst du den Bereich mit dem Text und den Bilder?

    Dann musst du den Elementen
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    eine passende Hintergrundfarbe geben. Ich würde aber empfehlen nicht 'transparent', sondern lieber so was wie rgba(200, 200, 200, 0.3) - das ist ein durchsichtiges hellgrau. die letzte Zahl (das 0.3) sagt dabei wie durchsichtig der Hintergrund sein soll - Werte zwischen 0 bis 1 sind erlaubt!

    Und die Schriftfarbe (color) muss noch passend gewählt werden.
     
  5. Crunchip85

    Crunchip85 Member

    Registriert seit:
    10. April 2019
    Beiträge:
    23
    Zustimmungen:
    1
    Du möchtest also den Teil der aktuell weiß ist transparent haben, so dass man den text auf dem Hintergrundbild sieht? Habe ich das richtig verstanden?
     
  6. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    Super das hat funktioniert! Vielen Dank
    Aber das was jetzt rot ist müsste auch so sein...
    Schrift bekommt natürlich noch eine andere Farbe

    [​IMG]
     
  7. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Da musst du, obwohl ich das auf dem Bild jetzt nicht wirklich erkennen kann, wohl noch diese Elemente...
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    mit der Wunschhintergrundfarbe versehen... und dann entsprechen die Schriftfarbe setzen.
     
  8. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    [​IMG]
    Klappt!
    Das was jetzt noch rot ist, nennt sich Titel Hintergrund und Titel Rahmen Farbe
     
  9. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Wenn du das Rote in den Einstellungen hast und dem eine Farbe zuordnen kannst... irgendwie hast du es ja auch rot gemacht... dann ändere es in der Einstellungen. Nur mit dem Bild kann ich nichts anfangen... um zu sehen, was da geändert werden kann/muss, brauche ich den Code.
    Am besten online.
     
  10. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    ja aber dann ist es ja weiß und ich kann es nicht auf rgba(200, 200, 200, 0.3) setzen.
    was für ein code?
     
  11. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Den Quellcode (HTML und CSS) der Seite... da steht alles drin, was man braucht. Wenn die Seite online ist, dann hat man auch den Quellcode.
    Aber teste mal folgendes ...
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Was allerdings diese breite Rahmen am unteren Rand ist weiß ich nicht... sehe ich auch nicht in der Seite, die online ist.
     
  12. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    Schau mal jetzt auf die Internetseite, hab die Farbe da verändert. Muss ich nur nachher wieder ändern....
     
  13. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    Das hat schon geholfen.

    [​IMG]
     
  14. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Jep.... die Hintergrundfarbe für die Überschrift kannst du hiermit manipulieren
    Code:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    und den Code für den Rahmen hab ich dir ja schon geschickt.
     
  15. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    hmmm der weiße Strich unten (Foto oben), der bleibt... ansonsten ist jetzt alles weg. Soll ich es einmal auf der Seite so umbauen?
     
  16. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Auf deinen geposteten Bildern seh ich diesen dicken Balken am unteren Rand... den finde ich auf der online Seite nicht.
    Muss irgendein 'margin' sein, da ist noch irgendwo eine Hintergrundfarbe auf auf eine Wert sein, der anders ist, als er soll.

    Ja... mach mal... vielleicht erkennt man dann, wo der her kommt,
     
  17. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    Ich hab es eingebaut, magst du noch mal schauen?
     
  18. b3317133

    b3317133 Well-Known Member

    Registriert seit:
    21. November 2014
    Beiträge:
    11.634
    Zustimmungen:
    1.778
    Leider ist der Text schwer/kaum lesbar, solche Spielereien eignen sich eher für eine Fotoseite, wo man Titel des Fotos und Ort o.ä. über ein Foto, das den eigentlichen Inhalt darstellt, drüberblendet, aber bei einer Seite, bei der der Text eigentlich wichtig wäre, nunja. o_O
     
  19. Ragili

    Ragili Active Member

    Registriert seit:
    22. September 2017
    Beiträge:
    26
    Zustimmungen:
    0
    Ich bin ja auch noch nicht fertig und die Besitzerin der Seite hätte das gerne. Das Foto ist nur vorläufig. Ich bastel ja eigentlich im Hintergrund und habe es eben nur für die Veranschauung geändert. Natürlich kann es so wie es jetzt gerade ist nicht bleiben.

    Es geht halt noch um den letzten roten Strich und dem hell orangen Balken
     
  20. Sailor56

    Sailor56 Well-Known Member

    Registriert seit:
    13. Juni 2017
    Beiträge:
    794
    Zustimmungen:
    104
    Teste mal das...
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Mit den px Werten kannst du ja mal spielen - ob das dann besser wird.
    ... und ja... @b3317133 hat Recht... das ist so wirklich schlecht zu lesen! Setze mal Schriftfarbe auf schwarz #000 und mache vielleicht bei den Hintergrundfarben den rgba Werten die letzte Zahl etwas größer (zB 0.5)
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden