Hintergrundfarbe bei Texten

Hallo in die Runde,

ich möchte gerne ein bekanntes Problem lösen. In meinem "body" soll ein Hintergrundbild. Damit man aber dennoch den Text (Navigation und Beiträge...) lesen kann, möchte ich entsprechende weiße Kästen haben. Orientiert habe ich mich hier. Leider bekomme ich es nicht realisiert. Entweder ist alles transparent oder gar nichts. Egal wie, gelesen werden kann gar nichts.

Hier ist mein Code:

.body .container
{
background-image: url('../images/Luther.JPG');
background-position: center;
background-size: cover;
}


.navigation .nav-pills
{
background-color: #f5f5f5;
}


.nav
{
background-color: #f5f5f5;
}


.item-pagehintergrund1
{
background-color: #f5f5f5;
}

Wie in einem anderen Thread beschrieben, wollte ich also bei den Menüs überall als Seitenklasse "hintergrund1" angeben. Das macht aber keinen Unterschied und ich finde meinen Fehler nicht. Könnt ihr mir bitte weiterhelfen? Vielen Dank!

cnp

Joomla 3.9.26

PHP 7.4.16

Stimmt, irgendetwas fehlte doch noch. Danke dir! kirche-dw.de

Dein Code ist jetzt für jeden einzelnen Artikel oder in der user.css? Letzteres haut mir doch das Bild raus oder nicht?

Mir geht es tatsächlich nur um die Hintergrundfarbe. Der Rest bleibt bei den "alten" Einstellungen.

Wenn ich also weisse-box als Klasse habe, sähe das in der user.css als .weisse-box aus oder wie? Und <div class="weisse-box">Text</div> käme in den Artikel? Ist es das, was bei dem anderen Thread als hintergrund1 gesetzt wurde?

Zitat von JoomlaWunder

Ich persönlich finde Hintergrundbilder immer schwierig. Sie sollten dezent sein, um nicht abzulenken. Beachte auch die mobile Darstellung!

Mein Problem ist, dass man auf der Seite nicht erkennt, dass es inhaltlich um Kirche geht. Also wollte ich ein entsprechendes Hintergrundbild (Luther wg. Lutherkirche) einfügen. Wenn ich es dort habe, wo der blaue Rand ist, sieht man den Inhalt gar nicht, es ist unruhig und damit nicht zielführend. Darum wollte ich es hinter dem Text haben. Luther würde damit genau in der Lücke zwischen linksbündigem Text und rechten Seitenmodulen sein. Darum muss der Hintergrund auch transparent sein. Sonst sieht man ja wieder nichts und ich lasse es besser beim Alten.

Ich stelle gerade fest, dass ich ja tatsächlich schon erreicht habe, was ich erreichen wollte. Gestern hatte er es mir noch nicht angezeigt. Und ja, es sieht tatsächlich doof aus. Kann ich denn die Hintergrundfarbe selbst transparent machen? Aber dann kann ich den Text auch wieder nicht lesen oder? Ich hatte jetzt folgende Ergänzung probiert:

.item-pagehintergrund1 p
{
    color: #333;
      opacity: 1;
}

.item-pagehintergrund1 h1 h2 h3 h4 h5 h6
{
    color: #275d9d;
      opacity: 1;
}

Das scheint keinen Sinn zu machen.

Im Anhang findet ihr übrigens das Ergebnis von obigem Code. Da ist Luther ja auch komplett verdeckt...

Zitat von Sieger66

https://www.peterkropff.de/site/css3/deckkraft.htm

Ha, das war die Lösung! Vielen Dank!

.body .container 
{
    background-image: url('../images/Luther.JPG');
    background-position: center;
    background-size: cover;
}

.navigation .nav-pills
{
    background: rgba(245, 245, 245, 0.7);
}

.nav
{
    background: rgba(245, 245, 245, 0.7);
}

.item-pagehintergrund1
{
    background: rgba(245, 245, 245, 0.7);
}

Jetzt noch die Module anpassen und dann müsste es passen. Vielen Dank!