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
2316 361 994

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 Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

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
2316 361 994

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 Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

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
2316 361 994

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 Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

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
2316 361 994
.newsletter-content > *, .newsletter-content h2, .newsletter-content p {
color: #ffffff !important;
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

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