Banner-Modul responsive machen

Hallo,

ich habe (bisher testweise nur auf einer Unterseite) ein benutzerdefiniertes Modul erstellt, welches als banner sowie vollständig als link zu einer entsprechenden Unterseite dienen soll.

Zu finden ist es hier: http://www.westernreiten.tv/sitemap.html

Die Rede ist davon:

Zielsetzung, und daran scheitere ich aktuell, dieses vollständig responsive zu machen, und dabei soll der gesamte modul-Inhalt (nicht nur der Text) als hyperlink fungieren, welcher sich im Joomla-backend via Modul editor leicht anpassen läßt.
Aus diesem Grund arbeite ich aktuell mit zwei verschachtelten divs.

Modul-Inhalt:

<a href="http://www.westernreiten.tv/angebote/kursangebote.html"><div id="banner-bg"><div id="banner-slogan">Unsere Veranstaltungen <br /> für 2017</div></div></a>

Dem Modul habe ich den Modulklassensuffix "banner" verpasst und via css folgendermaßen gestylt (darin enthalten sind auch noch die Versuche einfach nur darüber einzufügen, worüber ich aber nicht die gewünschte link-Funktion erhalte.

.well.banner {  background: none;  border: none;   box-shadow: none !important;  -moz-box-shadow: none !important;  -webkit-box-shadow: none !important;    margin-top: 40px; /* 30px */   padding: 0 0 0 0;  color: #333;  background-image: url("/images/banners/bg_1.png") !important;   background-position: top left;  background-repeat: no-repeat;   background-size: cover responsive;   /* background-size: contain; */      height: 380px;   max-width: 270px;}

Und hier sind die divs:

div#banner-bg {
  background-image: url("/images/banners/bg_1.png") !important;
   background-position: top left;
  background-repeat: no-repeat;
   background-size: cover responsive;
   /* background-size: contain; */
   width: 270px;
   height: 380px;
}


div#banner-slogan {
    background-color: white;
    opacity: 0.8;
    position: absolute;
    float: left !important;
    margin-left: 5px;
    margin-top: 45px;
    padding: 5px 15px 5px 15px;
    font-size: 20px; /* 26 */
    line-height: 30px; /* 30 */
    font-weight: 900 !important;
}

Wie schon geschrieben, stecken da jetzt diverse Versuche drin, aber ich komme nicht vorwärts und hoffe auf hilfreiche Hinweise.

Besten Dank,
Dan

Kurzer Nachtrag, scheinbar kann ich meinen Beitrag nicht mehr editieren.

Gäbe es denn eine andere Variante mit der man das gesamte Modul mit einem link versehen kann, als die von mir versuchte mit dem div?

Habe es jetzt anderweitig gelöst.

- aus dem div#banner-bg das Hintergrundbild entfernt
- den div#banner-slogan via " width: 14%;" responsiv gemacht
- dem Modul wieder das Hintergrundbild zugewiesen und lasse es mit " background-size: cover;" rechtsseitig beschneiden, anstatt zu skalieren

Sollte Jemand eine Idee haben wie man das besser lösen könnte, würde ich mich über entsprechende Hinweise freuen.