FROM CACHE - en_header

Brooklyn - picture as background of the newsletter section

Solved
JohnJ
Explorer
68 1 24

Does anyone know how to place an image as background of the newsletter section?
I can change the color, but I would like to place an image if possible.
theme: Brooklyn

Thank you in advance!

JohnJ_0-1611476331910.png

 

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@JohnJ 

Please check the attached screenshot.

There is something wrong I have seen with your code.

error-here.jpg

Please remove this.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.

View solution in original post

Replies 18 (18)
dmwwebartisan
Shopify Partner
11014 2377 3400

@JohnJ 

Instead of background-color property. You can use background-URL and place your background image there. Keep the background-size cover.

Like below.

.YourClass{
background-image: url('yourimage.png') no-repeat;
background-size: cover / contain;
}

 

Try the above. You can also give image height and width but try with this. Hope this helps.

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
JohnJ
Explorer
68 1 24

Hi, thanks for the info! Can you please tell me where to modify the code?
I've looked here: "newsletter(dot)liquid
But could't find it.

Or do/where I have to add the code?

dmwwebartisan
Shopify Partner
11014 2377 3400

@JohnJ 

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
JohnJ
Explorer
68 1 24

I have send you a PM with the details.
Thank you for your effort! 😄

dmwwebartisan
Shopify Partner
11014 2377 3400

@JohnJ 

You can add like this at the bottom of your assets/theme.scss.liquid file.

.template-index .newsletter{
    background-image: url(https://cdn.shopify.com/s/files/1/0399/9789/8907/files/grand-palace-1822487_1920.jpg?v=1611179117);
    background-size: cover;
    background-repeat: no-repeat;ver;
}

 

I added above one of the image URL. You can change your image there. Also if the font is not visible you can set the font color as well.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
JohnJ
Explorer
68 1 24
div#CollectionSection a.grid-product__image-link {
    background: transparent;
}
@media (max-width: 590px) {
.grid-product__image-link {
    background-color: transparent;
}
}
.additional-checkout-buttons {
  display: none !important;
}

.template-index .newsletter{
    background-image: url(https://cdn.shopify.com/s/files/1/0399/9789/8907/files/grand-palace-1822487_1920.jpg?v=1611179117);
    background-size: cover;
    background-repeat: no-repeat;ver;
}

Thank you. Here are the last lines of my theme.scss.liquid
I have added the code as you can see. But sadly it's not working as expected. The whole page get's mixed up.
Am I doing it wrong if you see the code?

dmwwebartisan
Shopify Partner
11014 2377 3400

This is an accepted solution.

@JohnJ 

Please check the attached screenshot.

There is something wrong I have seen with your code.

error-here.jpg

Please remove this.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
JohnJ
Explorer
68 1 24

That's not my shop 🙂

Or was it just the wrong screenshot?

dmwwebartisan
Shopify Partner
11014 2377 3400

@JohnJ 

Sorry, I updated that was wrong. Please check above.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
JohnJ
Explorer
68 1 24
.template-index .newsletter{
    background-image: url(https://cdn.shopify.com/s/files/1/0399/9789/8907/files/grand-palace-1822487_1920.jpg?v=1611179117);
    background-size: cover;
    background-repeat: no-repeat;
}

So it should like this? Thank you

dmwwebartisan
Shopify Partner
11014 2377 3400

@JohnJ 

Yes, this should work.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
JohnJ
Explorer
68 1 24

Wohooo 😄 it is working!
Thank you so much.

Can you please just tell me where to change the font color in the newsletter section?

JohnJ_0-1611494551395.png

 

 

dmwwebartisan
Shopify Partner
11014 2377 3400

@JohnJ 

Please add the following code.

.newsletter .section-header {
    color: #fff !important;
}
.newsletter .section-subheading {
    color: #fff !important;
}

This should work.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
dmwwebartisan
Shopify Partner
11014 2377 3400

@JohnJ 

If this works. Please accept as a solution. So others can take benefit.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
JohnJ
Explorer
68 1 24

It works. Thank you. Just the first line is still black as you can see.
"ABONNIERE UNSEREN NEWSLETTER"
If you could tell me how to fix this also, it would be 100% perfect 🙂

JohnJ_1-1611495459480.png

JohnJ_0-1611495420151.png

 

dmwwebartisan
Shopify Partner
11014 2377 3400

@JohnJ 

Oh! sorry that was my small mistake.

Please add the following code.

.newsletter .section-header__title {
    color: #fff !important;
}

 

Hope this works.

Thanks! 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
JohnJ
Explorer
68 1 24

Thank you very much for all your help.
It looks perfect now.
Have a nice day!

samsan1987
New Member
1 0 0

Where can I add the code when not have an scss file?

I have a theme.css.liquid

using streamline theme