Put a background color to fill the gaps in the decreased banner image size

[glucinth]

Good day! I uploaded a banner image (please see image with arrows) and adjust its size using this code:

.banner {
width: 50%;
margin: auto; /* This centers the banner */
background-color: #F3BCBA !important;
}

The reason why is I find it too big for dektop view. But the problem now is there are white gaps both sides. Can someone help me at least color its background? I’ll just copy the color code of the photo’s background. I tried several ways already but I couldnt find a way how to put background (color) behind banner image. Please help.

[DaisyVo]

Hi @glucinth

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

section.shopify-section.section:has(.banner) {
    background: black !important;
}

You can change the color code here to change the background color: https://prnt.sc/MtGOu8cCvHQY

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[glucinth]

Thank you so much! Appreciate this help!