How to add a background picture to newsletter section?

Store Design
1

Hello.

I am trying to add a background picture to my newsletter section but can’t seem to find how. This is what I get :

petitlaurierco_0-1640197573197.png
petitlaurierco_0-1640197573197.png1502×464 12.6 KB

This is what I want :

petitlaurierco_1-1640197603616.png
petitlaurierco_1-1640197603616.png1908×659 310 KB

Thank you!

1 Like
2

This could be done by adding the background image in that section through CSS. If you can share your store URL, it would be much easier to get an idea

3

@petitlaurierco

can you please share store url so i will check and guide you

4

@khgamujtaba

Password : towpri

Link : https://petitlaurierco123.myshopify.com/

thank you!

5

@KetanKumar

Password : towpri

Link : https://petitlaurierco123.myshopify.com/

Thank you

1 Like
6

@petitlaurierco

  1. Go to your store click on Actions > Edit Code

  2. Assets > theme.css or theme.css.liquid add below lines at the bottom of the file.

.index-section--newsletter-background {
background-image: url(https://cdn.shopify.com/s/files/1/0608/5191/2952/files/IMG_2471_edited_1950x.jpg?v=1638928881);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

7

@petitlaurierco

thanks for url

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.index-section--newsletter-background {
background-image: url(https://cdn.shopify.com/s/files/1/0608/5191/2952/files/IMG_2471_edited_1950x.jpg?v=1638928881);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
8

@Savior It worked!! yay! thank you!

Is there a way to change the text color only for the newsletter? It would be better if the font is in white instead of black.

Thank you!

9

@KetanKumar

It worked!! yay! thank you!

Is there a way to change the text color only for the newsletter? It would be better if the font is in white instead of black.

Thank you!

10

@petitlaurierco

Please add this

.newsletter-section.index-section--newsletter-background h2, .newsletter-section.index-section--newsletter-background p {
    color: white;
}

Please like and accept the reply as solution if it helped you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

1 Like
11

@Savior it works! Thank you so much for your time!