Platzhalter in CSS

[Der_Affenkoenig]

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.

[Gunnar Bittersmann]

@@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);
}

• MDN
• SELFHTML

😷 LLAP

[Der_Affenkoenig]

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

[Matthias Apsel]

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