Narrative theme - Changing the background of Newsletter Section to Image

Solved
SecuredSphere
Tourist
8 1 4

Hello Community,

I want to change the background of Newsletter section in the Homepage of Narrative Theme. Currently the only options are colour background and I want to change it to an image background. I saw in another post about changing the background for Password Section https://community.shopify.com/c/Shopify-Design/Adding-a-background-image-to-the-password-page-on-the.... Can anyone help with the coding and location to change the Newsletter section?

Many thanks in advance.

My website in case you need is securedsphere.com

0 Likes
HardikDavra
Shopify Partner
2223 344 960

PLease place this code at the end of theme.scss

#shopify-section-160387370583ad5263 .newsletter-wrapper {
    background: url(https://cdn.shopify.com/s/files/1/0475/4659/7536/files/Front_Card_KS_180x.jpg?v=1603968622%27);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

 
Here in the place of url(https://cdn.shopify.com/s/files/1/0475/4659/7536/files/Front_Card_KS_180x.jpg?v=1603968622%27), please put your image's link which you want to set.

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
SecuredSphere
Tourist
8 1 4

This is an accepted solution.

Thank you SO MUCH!!!

NadineLerner
Tourist
3 0 2

I had been looking everywhere for this! thank you so much!!! worked perfectly for me too

ttezera1
New Member
5 0 0

Hello I am not sure what I am doing wrong my newsletter box is still grey

asdfsdafdsasadffdsfdsafddasgasgafs.PNG

 

0 Likes
HardikDavra
Shopify Partner
2223 344 960

Hello @ttezera1,

Hello,

Welcome to the shopify Community.
I read your problem and it seems that I need to analyze your website to provide solution here.
Would you please share your website URL and if your website is password protected then also provide password.

Also Let me know on which page the news letter section is.

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
ttezera1
New Member
5 0 0

Thanks for the prompt response. My website is otb2021.com I was specifically trying to do it in this newsletter box pictured below on the bottom of my homepage

 

ttezera1_0-1621010199108.png

 

0 Likes
HardikDavra
Shopify Partner
2223 344 960

Please Go to Online Store -> Themes -> Edit code -> Assets -> Upload Image which you want to set as background image.
Then Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

#shopify-section-newsletter .newsletter-content-wrapper {
    background-image: url({{ 'file-name-with-extension' | asset_img_url: 'original' }});
}

 

PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
ttezera1
New Member
5 0 0

Thank you so much you made it super easy! My last question is how do I change the font in the newsletter to white without changing the font of the whole website?newsletterclolo.PNG

 

 

0 Likes
HardikDavra
Shopify Partner
2223 344 960
.newsletter-content > *, .newsletter-content h2, .newsletter-content p {
color: #ffffff !important;
}
PageFly - TOP5 in the Shopify app store. Learn More.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp