Brooklyn - picture as background of the newsletter section

Solved
JohnJ
Explorer
59 1 21

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

 

dmwwebartisan
Shopify Partner
4475 1003 1283

@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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
JohnJ
Explorer
59 1 21

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
4475 1003 1283

@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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
JohnJ
Explorer
59 1 21

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

dmwwebartisan
Shopify Partner
4475 1003 1283

@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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
JohnJ
Explorer
59 1 21
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
4475 1003 1283

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
Advanced Shopify Page Builder to customize your pages - check here PageFly App
JohnJ
Explorer
59 1 21

That's not my shop

Or was it just the wrong screenshot?

dmwwebartisan
Shopify Partner
4475 1003 1283

@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
Advanced Shopify Page Builder to customize your pages - check here PageFly App