Hintergrundbild, teiltransparenter Vordergrund

  • 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

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

  • Probiere mal damit


  • 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

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

  • 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