Hintergrundbild für einzelnen Artikel

aruttkamp

Hallo !

Ich möchte diesem Artikel ein Hintergrundbild "spendieren".
Ich habe im Menupunkt unter Seitenanzeige die CSS Klasse hintergrund_marmor vergeben.

In der User.css unter /media/templates/site/cassiopeia habe ich

.item-pagehintergrund_marmor {background-image: url('../images/Hintergründe/Hintergrundbild_marmor.jpg');

background-repeat: repeat;

}

eingefügt.

Das Bild wird nicht angezeigt. Wo liegt mein Denkfehler ??

Ich kommte mit den CSS "Geschichten" noch nicht wirklich zurecht.. Code schreiben ist einfacher *lach*

Nachtrag : Ja - ein Update auf PHP 8 ist in Arbeit.

chr-hl

Moin,

Eine Klasse beginnt mit einem führenden Punkt.

Ausserdem muss ein Leerzeichen zwischen der Klasse item-page und deiner Klasse.

Christian

aruttkamp

Hallo Christian,

du meinst es müsste dann so aussehen ?

.item-page .hintergrund_marmor {background-image: url('../images/Hintergründe/Hintergrundbild_marmor.jpg');

background-repeat: repeat;

}

LukasHH

aus irgendeinem Grund werden die Klassen zusammengeschrieben ausgegeben.

So sollte es passen:

CSS

.com-content-article.item-pagehintergrund_marmor {
    background-image: url('/images/Hintergründe/Hintergrundbild_marmor.jpg');
    background-repeat: repeat;
}

Habe aber gerade gesehen, dass es an 2 Stellen ausgegeben wird:

Wenn es oben im Body-Tag bleibt, dann wäre das nachfolgende vielleicht besser geeignet:

CSS

.hintergrund_marmor .site-grid {
    background-image: url('/images/Hintergründe/Hintergrundbild_marmor.jpg');
    background-repeat: repeat;
}

aruttkamp

Zitat von LukasHH

CSS .hintergrund_marmor .site-grid { background-image: url('/images/Hintergründe/Hintergrundbild_marmor.jpg'); background-repeat: repeat; }

Das funktioniert ! Dafür erstmal vielen Dank !
Warum die Klassen zusammengeschrieben werden ist mir auch nicht klar. Danach hatte ich gestern abend schon gesucht.
Das "erforsche" ich dann heute Abend

drmenzelit

Die Klassen werden zusammen geschrieben, wenn sie alle einem Element gehören

<div class="klasse1 klasse2">...</div> -> du kannst dieses Element gezielt mit .klasse1.klasse2 ansprechen

<div class="klasse1"><p class="klasse2">...</p></div> -> hier hast du ein p-Element innerhalb eines div-Elements, kann mit .klasse 1 .klasse2 angesprochen werden, was bedeutet .klasse2 ist innerhalb von .klasse1. Hier kannst du spezifischer .klasse1 > .klasse2 schreiben, d.h. .klasse2 ist ein DIREKTES "Kind" von .klasse1 ... es gibt noch weitere Kombinationen

christine2

Hallo,

Hmmm, wollte gestern vor #4 das hier schicken:

Code

.hintergrund_marmor {....}

Hatte sich dann wohl erledigt.

Was mir aber auffällt ist:

Code

.hintergrund_marmor .site-grid {.....}

also durch: Zusatz: .site-grid, bleibt unten vor dem (.footer ...) ein weißer Streifen:

Liebe Grüße

Christine

LukasHH

Zitat von christine2

also durch: Zusatz: .site-grid, bleibt unten vor dem (.footer ...) ein weißer Streifen:

Wenn man nur

Code

.hintergrund_marmor {...}

angibt, dann wird der Hintergrund auf der gesamten Seite (<body>) gesetzt. Da header und footer einen eigenen Hintergrund haben, wird der Hintergrund vom body überdeckt. Mit dem Zusatz ".site-grid" wirkt sich das nur auf den mittleren Teil aus.

Der weiße Streifen kommt bei der Angabe mit ".site-grid", weil ".footer" einen Außenabstand von oben (margin-top) hat.

christine2

Zitat von LukasHH

Der weiße Streifen kommt bei der Angabe mit ".site-grid", weil ".footer" einen Außenabstand von oben (margin-top) hat.

Ah ja Grad gesehen: .footer {.....} hat ein margin-top: 1em;

Könnte, TE weggeben

Code

.footer {margin-top: 0;}

wenn er möchte.

(Un) eigentlich wollte ich aber gestern, es so schreiben:

Code

body.hintergrund_marmor {....}

Liebe Grüße

Christine

Tags