Hintergrundbild für einzelnen Artikel

    • Neu
    Joomla Version
    4.4.1
    PHP Version
    PHP 7.4.x
    Hoster
    Selbsthosting
    Link (URL) zur Seite mit dem Problem
    https://www.suchhundeausbildung-mh.de/index.php/training/coaching

    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.

    • Neu

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

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Einmal editiert, zuletzt von Indigo66 () aus folgendem Grund: Ein Beitrag von LukasHH mit diesem Beitrag zusammengefügt.

    • Neu
    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 ;)

    • Neu

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

    • Neu

    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

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

    Wenn man die Lösung hat, dann muss man nur noch das passende Problem finden.

    Gefällt mir 1
    • Neu
    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