Keep text within background image in Joomla Module

Question

I am adding a button to pop up a newsletter signup form inside a module. I have a background image set and am looking for a way to ensure the text says on top of the background image regardless of screen size. I've been playing about with the css but am no expert so if anyone could provide any advice on the best way to do this I would be very appreciative.

My CSS is:

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

The HTML within the module is:

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

With this the background image is not responsive either, I'm guessing because of the height attribute, but without that the background image is cut off.

The URL to the page is - Page URL removed Thank you in advance for any advice.

Answer 1

I would setup two variants with media queries. You will want to play with padding, etc.

So on larger screens, you want the image to fit as large as it can without being distorted (contain) and set the max width to slightly less than the image's width so text doesn't run over.

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

On smaller screens, just have it set to be 100% width that it can be. Again, the padding keeps the text from touching the edges.

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