web-dev-qa-db-fra.com

Conserver le texte dans l'image de fond dans le module Joomla

J'ajoute un bouton pour afficher un formulaire d'inscription à la newsletter dans un module. J'ai une image d'arrière-plan définie et je cherche un moyen de m'assurer que le texte s'affiche en haut de l'image, quelle que soit la taille de l'écran. J'ai joué avec le CSS mais je ne suis pas un expert, donc si quelqu'un pouvait donner un conseil sur la meilleure façon de le faire, je vous en serais très reconnaissant.

Mon CSS est:

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

Le code HTML dans le module est:

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

Avec cela, l’image d’arrière-plan n’est pas sensible non plus, je suppose en raison de l’attribut height, mais sans que l’image d’arrière-plan soit coupée.

L'URL de la page est - URL de la page supprimée Merci d'avance pour tout conseil.

joomla-3.xcss
1
Dtorr1981

Je voudrais configurer deux variantes avec des requêtes de médias. Vous voudrez jouer avec un rembourrage, etc.

Ainsi, sur les écrans plus grands, vous voulez que l'image tienne aussi grande que possible sans être déformée (contenir) et définissez la largeur maximale légèrement sur la largeur de l'image pour que le texte ne soit pas écrasé.

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

Sur des écrans plus petits, réglez simplement la largeur à 100%. Encore une fois, le remplissage empêche le texte de toucher les bords.

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