Hintergrundbild, teiltransparenter Vordergrund

derkps · 4. Dezember 2021

Hallo,

Ich setze im Menüpunkt mit itemid-435 ein Hintergrundbild

Code

.itemid-435 {
background-image: url("../../../images/stories/background3.jpg");
background-size: cover;
}

Das funktioniert in J3.10/Protostar und in J4/Cassiopeia

Nun möchte ich ein teiltransparentes Overlay über das Bild legen.
In J3.10/Protostar funktioniert das formatfüllend mit

Code

.itemid-435 > .body > .container-fluid {
background-color: rgb(255,255,255,0.5);
margin: -20px;
}

In J4/Cassiopeia habe ich es versucht mit

Code

.container-component {
background-color: rgb(255,255,255,0.5)
margin-left: -20px;
margin-right: -20px;
margin-bottom: -10px;
}

Das sieht dann so aus wie hier. Das Overlay ist nicht formatfüllend mit symmetrischem Rand rechts/links.

Margin schiebt das Overlay nur schief: rechts tut sich garnichts; unsymmetrisch.

Was mache ich falsch?

vG

Indigo66 · 4. Dezember 2021

display:grid ist daran schuld, was ich aber nicht ändern würde.
Für das Cassippeia brauchst Du wahrscheinlich ein weiteres umschließendes DIV nach dem Container .site-grid.

Dafür solltest Du das Template kopieren und die Änderungen in der index.php machen.

LukasHH · 4. Dezember 2021

Probiere mal damit

CSS

.container-component {
/*! content: ''; */
/*! width: 100%; */
/*! height: 100%; */
/*! position:relative; */
/*! background-color: rgb(255,255,255,0.5); */
/*! margin-left: -20px; */
/*! margin-right:  -20px; */
/*! margin-bottom: -10px; */
/*! left: 0; */
/*! right: 0; */
}
.itemid-435 .site-grid{
background-color: rgb(255,255,255,0.5);
margin-bottom: -20px;
}

Alles anzeigen

derkps · 6. Dezember 2021

Hallo,

vielen Dank für die Hinweise!

Mit .itemid-435 > .body > .container-fluid { konnte ich in 'Protostar' auf den kompletten Menüpunkt zugreifen.
Von (#3) .itemid-435 .site-grid{ hätte ich das gleiche erwartet. Ist aber leider nicht so.
Bei Cassiopeia muss ich offensichtlich jede Position einzeln anfassen.
Wenn der 'gelbe' Bereich nicht lang genug ist, bleibt immer ein Streifen übrig, der nicht erfasst wird.

Die Zeilen von #3 zu .container-component { habe ich ausprobiert. Sie bringen aber nicht den gewünschten Erfolg.

Zum umschließenden DIV habe ich eine Klasse eingefügt <div class="transparenz"> .

.site-grid { benötigt kein margin-left/-right aus.

Das kommt der Sache schon näher.

Bleibt aber abschließend die Frage, wie man auf den kompletten Menüpunkt zugreifen kann wie bei 'Protostar'.

Mit F12 habe ich es nicht herausgefunden.

vG

Indigo66 · 7. Dezember 2021

Zitat von ycsh

Bleibt aber abschließend die Frage, wie man auf den kompletten Menüpunkt zugreifen kann wie bei 'Protostar'.

Da hat sich nichts geändert. Auch im Cassiopeia wird die itemID als Klasse in den BODY geschreiben. Du kannst aber auch einen Seitenklassen-Suffix eintragen. Vielleicht schreibt das Cassiopeia es ja auich in den BODY (habe ich noch nicht getestet).

LukasHH · 7. Dezember 2021

Ah - jetzt habe ich verstanden, was gemeint ist mit "auf den kompletten Menüpunkt zugreifen" gemeint ist.

In Cassiopeia steht die ItemID im Body-Tag, damit kann man die gesamte Seite ansprechen. Die nachfolgenden Klassen haben sich etwas geändert.

.itemid-435 bzw. body.itemid-435 spricht den gesamten Inhalt an.
.itemid-435 .container-header => spricht den Header an

.itemid-435 .site-grid => der gesamte Inhaltsbereich

.itemid-435 .site-grid .container-component => spricht den mittleren Inhaltsbereich an

.itemid-435 .site-grid .container-sidebar-right => spricht die Siedebar rechts an

.itemid-435 .container-footer => spricht den Footer an

Tags