Seitenhintergrund transparent

  • 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

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Teste doch mal so was in der Art...(im zusätzlichen CSS)


    Die URL zu Bild musst du natürlich noch anpassen... hab da einfach das erste Bild eingetragen, dass ich auf der Seite gefunden habe

  • Mit ...'die Seite weiß ist'... meinst du den Bereich mit dem Text und den Bilder?

    Dann musst du den Elementen

    HTML
    .site-main-container {
     background: transparent;
    }
    .site-content-area .card {
      background: transparent;
      color: #333;
    }


    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.

  • 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?

  • Mit ...'die Seite weiß ist'... meinst du den Bereich mit dem Text und den Bilder?

    Dann musst du den Elementen

    HTML
    .site-main-container {
     background: transparent;
    }
    .site-content-area .card {
      background: transparent;
      color: #333;
    }


    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.

    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

    [Blockierte Grafik: https://www.bilder-upload.eu/thumb/393241-1557860496.jpg]

  • Da musst du, obwohl ich das auf dem Bild jetzt nicht wirklich erkennen kann, wohl noch diese Elemente...

    HTML
    .site-content-area .card .entry-header {
        background: deine_farbe;
    }
    .site-footer .row  {
        background: deine_farbe;
    }


    mit der Wunschhintergrundfarbe versehen... und dann entsprechen die Schriftfarbe setzen.

  • 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.

  • 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
    .site-content-area .card-header.entry-header {
      border-bottom: 1px solid rgba(200, 200, 200, 0.3);
    }
    .site-content-area .card {
      border: 1px solid rgba(200, 200, 200, 0.3);
    }

    Was allerdings diese breite Rahmen am unteren Rand ist weiß ich nicht... sehe ich auch nicht in der Seite, die online ist.

  • 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
    .site-content-area .card-header.entry-header {
      border-bottom: 1px solid rgba(200, 200, 200, 0.3);
    }
    .site-content-area .card {
      border: 1px solid rgba(200, 200, 200, 0.3);
    }

    Was allerdings diese breite Rahmen am unteren Rand ist weiß ich nicht... sehe ich auch nicht in der Seite, die online ist.

    Das hat schon geholfen.

    [Blockierte Grafik: https://www.bilder-upload.eu/thumb/25aeab-1557865103.jpg]

  • Jep.... die Hintergrundfarbe für die Überschrift kannst du hiermit manipulieren

    Code
    content-area .card .entry-header {
        background: deine farbe;
    }


    und den Code für den Rahmen hab ich dir ja schon geschickt.

  • hmmm der weiße Strich unten (Foto oben), der bleibt... ansonsten ist jetzt alles weg. Soll ich es einmal auf der Seite so umbauen?

  • 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,

  • 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

  • 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

  • Teste mal das...

    HTML
    .card {
        margin-bottom: 0rem !important;
    }
    .page #primary {
      padding-right: 3px;
      padding-left: 3px;
      padding-top: 3px;
      padding-bottom: 3px;
    }


    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)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!