Brooklyn - picture as background of the newsletter section

[JohnJ]

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!

[dmwwebartisan]

@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!

[JohnJ]

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]

@JohnJ 

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

Thanks!

[JohnJ]

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

[dmwwebartisan]

@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! 

[JohnJ]

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 · Accepted solution]

@JohnJ 

Please check the attached screenshot.

There is something wrong I have seen with your code.

Please remove this.

[JohnJ]

That's not my shop

Or was it just the wrong screenshot?

[dmwwebartisan]

@JohnJ 

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

Thanks!