Der_Affenkoenig: Platzhalter in CSS

Hallo,

ich arbeite zur Zeit etwas daran, mir eine kleine Homepage zu bauen und stehe da vor einem kleinen "Problem".

ich möchte gerne zwei Bilder in einem div überlagern für verschiedene Kategorien als "Button" sozusagen -- eine Textur als Hintergund und ein spezifisches Bild passend zur Kategorie darüber, die zur Kategorie passt.

Das funktioniert auch soweit alles ohne Probleme.

Das Ganze hab ich in etwa so gelöst (mal symbolisch dargestellt):

<div class="cover kategorie1"><a href="kategorie1.html">Kategorie 1</a></div>

<div class="cover kategorie2"><a href="kategorie2.html">Kategorie 2</a></div>
.cover {

    display: -webkit-flex;

      display:    -moz-flex;

      display:     -ms-flex;

      display:      -o-flex;

      display:         flex;

      padding-right: 0;

      padding-left: 0;

}


.cover.kategorie1 {

  height: 30em;

  border: 3.125em solid #000;

  background-image:url("../img/kategorie1-titel.png"), url("../img/textures/hintergrund.png") ;

  background-repeat:no-repeat, repeat;

  background-position:center center;

  background-size: cover, auto;

}


.cover.kategorie2 {

  height: 30em;

  background-image:url("../img/kategorie2-titel.png"), url("../img/textures/hintergrund.png") ;

  background-repeat:no-repeat, repeat;

  background-position:center center;

  background-size: cover, auto;

}

jetzt zu meinem eigentlichen Anliegen:

ich würde gerne die "hintergrund.png" aus ".cover.kategorie1" und aus ".cover.kategorie2" in ".cover" verlagern.

Wenn ich mal den Hintergrund austauschen möchte, dass ich da nicht bei jeder Kategorie einzeln die Zeile ändern muss.

Aber da brauche ich irgend einen Platzhalter für "kategorieX-titel.png", sonst überschreibt er ja einfach alles aus ".cover" mit den Werten in ".cover.kategorie1".

.cover {

     background-image:******************, url("../img/textures/hintergrund.png") ;

}


.cover.kategorie1 {

     background-image:url("../img/kategorie1-titel.png"), ********************* ;

}

Gibt es sowas überhaupt?

Ich habs mal mit "inherit" probiert, aber das wollte nicht so recht funktionieren.

Zumindest nach meinem Verständnis nach → ich kann da natürlich auch komplett falsch liegen, weil ich da keine allzu große Ahnung von habe,......

Wie man an dem Code wohl erkennen kann, bin ich bei weitem kein Profi, und hab mir alles selber von Hand zu Fuß über etliche verschiedene guides, websites, anschauen und abschreiben aus vorlagen etc.... beigebracht.

Ich hab schon etliche Guides "ergooglet", aber welche die so direkt sich mit meinem spezifischen Problem befassen , da hab ich nix gefunden, deshalb mal hier einen Beitrag erstellt.

Hoffentlich ist ersichtlich was ich meine und es kann mir jemand weiterhelfen.

akzeptierte Antworten

  1. @@Der_Affenkoenig

    Gibt es sowas überhaupt?

    Ja, custom properties.

    .cover {
      --cover-background: url("../img/textures/hintergrund.png");
    }
    
    
    .cover.kategorie1 {
      background-image:url("../img/kategorie1-titel.png"), var(--cover-background);
    }
    

    😷 LLAP

    --
    Wenn der Faschismus wiederkehrt, wird er nicht sagen: „Hallo, ich bin der Faschismus.“ Er wird sagen: „Hört auf zu zählen! Ich habe gewonnen!“
    1. Vielen Dank. 👍 Funktioniert super!

      hab da echt schon etliche Sachen probiert und bin dauernd gescheitert. Eigentlich recht einfach, wenn man nur vorher wüsste, wonach was man suchen sollte xD

  2. Hallo Der_Affenkoenig,

    .cover {
      display: -webkit-flex;
      display:    -moz-flex;
      display:     -ms-flex;
      display:      -o-flex;
      display:         flex;
    }
    

    die ganzen Präfixe brauchst du nicht mehr.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.