Add a background banner for the newsletter section (diffusion list) on Dawn theme

[Sauron6263]

Hello, i would like to add a background banner for the newsletter section (diffusion list) on Dawn theme but there is no such option, i tried to add this code at the bottom of newsletter-section.css :

.newsletter__wrapper.color-background-image.gradient.content-container.isolate.section-template–15942398640382__16511372724de01edd-padding {
background-image: url(https://cdn.shopify.com/s/files/1/0822/3775/1645/files/MobileGear-newsletter.jpg?v=1711436464) !important;
}

But this is changing nothing the newsletter is still with white background, any ideo to add this ? url : https://mobilegear.fr/password and password : ayohto

[Raj-webdesigner]

1)online Store

2)Edite Code
3) Find newsletter-section.css

This css in Add In Your newsletter-section.css

.newsletter__wrapper {
    background: url(https://cdn.shopify.com/s/files/1/0822/3775/1645/files/MobileGear-newsletter.jpg?v=1711436464);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center center;
}

[Jon_Innovonics]

Hey there!
You can add something like this:

.newsletter__wrapper.color-scheme-1 {
    background: url('https://cdn.shopify.com/s/files/1/0822/3775/1645/files/MobileGear-newsletter.jpg?v=1711436464');
}

[Sauron6263]

hey, works fine, the titlle and text in black are not visible, anything else to add to your code to put everything in white to be visible ?

[Jon_Innovonics]

And I notice the image is a little large so this might make it look a bit better for you:

.newsletter__wrapper.color-scheme-1 {
    background: url('https://cdn.shopify.com/s/files/1/0822/3775/1645/files/MobileGear-newsletter.jpg?v=1711436464');
    background-position: center;
    background-size: contain;
}

[Jon_Innovonics]

This will add the background image and make the text white:

.newsletter__wrapper.color-scheme-1 {
    background: url('https://cdn.shopify.com/s/files/1/0822/3775/1645/files/MobileGear-newsletter.jpg?v=1711436464');
    background-position: center;
    background-size: contain;
}
.newsletter__wrapper.color-scheme-1 h2 {
    color: white;
}
.newsletter__wrapper.color-scheme-1 .newsletter__subheading.rte.scroll-trigger.animate--slide-in {
    color: white;
}

[Raj-webdesigner]

put This Code in You Above of them

.newsletter h2.inline-richtext.h1.scroll-trigger.animate--slide-in,.newsletter .newsletter__subheading.rte.scroll-trigger.animate--slide-in p  {
    color: #fff;
}

[Sauron6263]

yep, but now the image is split

[Sauron6263]

the size of the banner is good now but the pictures is split in 3

[Sauron6263]

and when i add background-size: auto; it is too large

[Jon_Innovonics]

My apologies, please update to this:

.newsletter__wrapper.color-scheme-1 {
    background: url('https://cdn.shopify.com/s/files/1/0822/3775/1645/files/MobileGear-newsletter.jpg?v=1711436464');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
.newsletter__wrapper.color-scheme-1 h2 {
    color: white;
}
.newsletter__wrapper.color-scheme-1 .newsletter__subheading.rte.scroll-trigger.animate--slide-in {
    color: white;
}

[Jon_Innovonics]

Definitely, that’s why on mine I do background-size: contain;

it should make the image not blow out of proportion.

[Sauron6263]

it is okey i fixed it, i added a black semi-transparent background for the white text to be more visible, the problem is that the black arrow to send the email is not visible, i tried a lot of different things to fix it and change the z-index but the arrow is not visible, any idea why ? my code :

/* Styles généraux */
.newsletter__wrapper.color-scheme-1 {
position: relative;
background: url(‘https://cdn.shopify.com/s/files/1/0822/3775/1645/files/Design_sans_titre_7.jpg?v=1711441121’) no-repeat center center;
background-size: cover;
}

/* Ajout d’une couche semi-transparente noire sur toute la section /
.newsletter__wrapper.color-scheme-1::before {
content: ‘’;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5); / Noir semi-transparent /
z-index: -1; / Placer en dessous de tous les autres éléments */
}

/* Styles pour les titres H2 à l’intérieur de la wrapper /
.newsletter__wrapper.color-scheme-1 h2 {
color: white; / Couleur des titres en blanc */
}

/* Styles pour les sous-titres et tout autre texte dans la wrapper /
.newsletter__wrapper.color-scheme-1 .newsletter__subheading.rte.scroll-trigger.animate–slide-in,
.newsletter__wrapper.color-scheme-1 {
color: white; / Couleur de tous les textes en blanc */
}

/* Assurez-vous que la flèche d’envoi reste visible /
.newsletter__wrapper.color-scheme-1 .newsletter__submit-button::after {
content: ‘\203A’; / Code unicode de la flèche /
position: relative;
z-index: 2; / Assurez-vous que la flèche est au-dessus de la couche semi-transparente /
color: black; / Couleur de la flèche d’envoi */
}

/* Ajustements pour les appareils mobiles */
@media (max-width: 768px) {
.newsletter__wrapper.color-scheme-1 {
background-position: left center;
}
}

[Raj-webdesigner]

Add This css

.newsletter-form__button svg.icon.icon-arrow {
    stroke: #000;
}

[Sauron6263]

working thx !