it-swarm.com.de

Belassen Sie den Text im Hintergrundbild des Joomla-Moduls

Ich füge eine Schaltfläche hinzu, um ein Newsletter-Anmeldeformular in einem Modul zu öffnen. Ich habe ein Hintergrundbild festgelegt und suche nach einer Möglichkeit, um sicherzustellen, dass der Text unabhängig von der Bildschirmgröße über dem Hintergrundbild angezeigt wird. Ich habe mit dem CSS herumgespielt, bin aber kein Experte. Wenn also jemand einen Rat geben könnte, wie man das am besten macht, wäre ich sehr dankbar.

Mein CSS ist:

/** Newsletter sign up styling **/
.newsletter {
  background-image: url(/images/nl-bg.png);
    background-repeat: no-repeat;
    text-align: center;
    height: 240px;
    background-position: center;
    padding-top: 80px;
}
.newsletter h2 {
  margin-bottom:0;
}

Das HTML innerhalb des Moduls ist:

<div class="newsletter"><p style="text-align: center;">To be the first to see exclusive artwork and hear the latest news on Lindsey&rsquo;s writing, sign up to the newsletter.</p>
<p style="text-align: center;">{source}&lt;script type="text/javascript" src="https://static.mailerlite.com/data/webforms/544009/m6o3n5.js?v1"&gt;&lt;/script&gt;{/source}</p></div>

Damit reagiert das Hintergrundbild auch nicht, ich vermute wegen des Höhenattributs, aber ohne das wird das Hintergrundbild abgeschnitten.

Die URL zur Seite lautet - Seiten-URL entfernt. Vielen Dank im Voraus für jeden Hinweis.

1
Dtorr1981

Ich würde zwei Varianten mit Medienabfragen einrichten. Sie werden mit Polstern usw. spielen wollen.

Auf größeren Bildschirmen soll das Bild so groß wie möglich sein, ohne verzerrt zu werden (enthalten), und die maximale Breite soll etwas geringer sein als die Breite des Bildes, damit der Text nicht überläuft.

@media only screen and (min-width: 768px) {
    .newsletter {background-size: contain;padding: 80px 20px;max-width: 800px;margin: 0 auto;}
}

Bei kleineren Bildschirmen muss die Breite nur auf 100% eingestellt werden. Auch hier verhindert das Auffüllen, dass der Text die Kanten berührt.

@media only screen and (max-width: 767px) {
    .newsletter {background-size: 100%;padding: 80px 20px;}
}
1
YellowWebMonkey