1

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.

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;}
}
  • I have tried that and it cuts the sides of the background image off, there must be something I'm doing wrong. On Mobile it also cuts the image sides off. – Dtorr1981 Aug 30 '17 at 15:35
  • You're always going to have a problem on mobile as the image will respond to the width of the viewport, thus the height will drastically reduce, resulting in the text overlapping vertically insstead. You'd be better off splitting the image into 2 (top/bottom) and setting a background colour for the .newsletter class. – Lodder Aug 30 '17 at 20:33
  • I updated my answer – YellowWebMonkey Aug 30 '17 at 20:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.