Hintergrundbild im Modul anpassen

    Joomla Version
    5.1
    PHP Version
    PHP 8.1.x
    Hoster
    Strato
    Link (URL) zur Seite mit dem Problem
    http://next1.cfee.info/index.php

    Hallo in die Runde,

    ich würde gerne ein Modul derart gestalten, dass das Hintergrundbild komplett dargestellt wird und darüber ein Text liegt,

    Bis jetzt sieht das so aus:

    Das Ergebnis sollte in etwa so aussehen (das hier ist per BIldbearbeitung entstanden)

    Mein Lösungsansatz will nicht klappen:

    Code
    .top-a.no-card {
    background-repeat: no-repeat;
    background-size: cover;
}

    Ich wäre dankbar für eine Idee.

    LG

    Georg

    Dort ist das Bild tatsächlich als Hintergrundbild hinterlegt, Leider passt sich die Modulgröße nicht so an, als wäre das Bild im Vordergrund. Deshalb der Versuch per Modulklasse zu stylen.

    Das Bild passt sich dem Platzbedarf des Inhalts an.

    Du kannst eine Höhe erzwingen in dem du in css eine feste Höhe angibst.

    Oder du schreibst deinen Inhalt zum Beispiel so - und erzwingst damit einen breiten Rand um deinen Inhalt herum.

    Code
    <div class="p-2">
  <p class="erste Zeile">erste Zeile</p>
  <p class="zweite Zeile">zweite Zeile</p>
</div>

    Wow, echt clever, tausend Dank :) , genauso hatte ich mir das vorgestellt.

    Wenn jetzt noch die Responsivität gelingen könnte, wäre es perfekt. Alle Style-Elemente für den Hintergrund scheinen sich aber nicht anwenden zu lassen.

    Mit zwei weiteren Zeilen wird auch die Anpassung für schmale Bildschirme halbwegs akzeptabel.

    Code
    #mod-custom116, #mod-custom118 {
    height: 220px;
    background-size: contain;
    background-repeat: no-repeat;
}

    Nochmal lieben Dank für die Nachhilfe, Christine

    Code
    #mod-custom116, #mod-custom118 {
    height: 220px;
    padding-top: 60px;
    padding-left: 10px;
    padding-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    S o ist es schick chinese