Section background image is stretching

[solmadestudio]

store: julisa.com

pword: julialisa21 (the "enter password" link is super small and white in the bottom right corner on desktop. it's hard to see)

I have a background image in the newsletter section near the bottom of my homepage. I created the image to fit this section proportionally, but it's scaling up and only showing about half of the image on desktop, and just about 1/5 of the image on mobile.

What code can I add to better fit the background image to the size of this section?

Here is the current code I have:

> * {
background: url("https://cdn.shopify.com/s/files/1/0865/3124/4328/files/Julisa_Newsletter_Footer_BG_4.jpg?v=172382669...") !important;
}

[BSSCommerce-HDL]

Hi @solmadestudio, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
#shopify-section-template--23181417218344__newsletter_newsletter_xT9C7y > * {
    background-size: cover !important;
}
</style>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[solmadestudio]

Hi, thank you. Unfortunately this didn’t help. Any other ideas?

[Made4uo-Ribe]

Hi @solmadestudio 

Please, replace your code below. 

#shopify-section-template--23181417218344__newsletter_newsletter_xT9C7y > * {
    background: url(https://cdn.shopify.com/s/files/1/0865/3124/4328/files/Julisa_Newsletter_Footer_BG_4.jpg?v=1723826694) no-repeat center center !important;
    background-size: cover !important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[solmadestudio]

Still not working, and this literally placed the code visually on the homepage. Thanks anyway.