How to add a background image to a Debut Newsletter section?

Store Design
1

Hi can anyone help? Looking to have a background image in the newsletter section.

Thanks!

2

@Fabian23

Please share your stroe URL.

Thanks!

3

https://royal-cavalry.myshopify.com/?key=7b5c2df0ed10fff58d293b7db083de9ee2a42e065d94eb8a410b87c1cf449fcc

password: hello0989

4

@Fabian23

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

.index-section--newsletter-background {
    background-color: var(--color-bg-alt);
    background-image: url('https://cdn.shopify.com/s/files/1/0596/8543/7610/files/vintage-car-speedometer_1728x.jpg?v=1633332690');
    background-position: center center;
    background-size: cover;
}

Thanks!

5

Thanks it worked! but how can I change the picture?

6

@Fabian23

background-image: url('add your image url');
7

@Fabian23

thanks!

8

.index-section–newsletter-background {
background-color: var(–color-bg-alt);
background-image: url(https://unsplash.com/photos/_GH9LwhlSO4);
background-position: center center;
background-size: cover;

Did I do it correctly? cause it doesn’t work.

9

@Fabian23

Please download photo and upload your assets folder and use image url

Thanks!

10

@Fabian23

Try this code

.index-section--newsletter-background {
    background-color: var(--color-bg-alt);
    background-image: url('https://images.unsplash.com/photo-1545486332-9e0999c535b2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=387&q=80');
    background-position: center center;
    background-size: cover;
}
11

.index-section–newsletter-background {
background-color: var(–color-bg-alt);
background-image: url(‘https://unsplash.com/photos/_GH9LwhlSO4
https://unsplash.com/photos/_GH9LwhlSO4/download?force=true&w=640’);
background-position: center center;
background-size: cover;

Do you mean like this?

12

Thank you very much!!!

13

By the way, do you have any idea on how to make the footer look like the photo?

footer design sample.jpg
footer design sample.jpg5088×792 152 KB

14

@Fabian23

This is code customization work. Please hire shopify Expert.

Thanks!