How to add announcement bar image full width in dawn theme

[RJE_ECOM]

Hello,

I am using the following custom code in Dawn Theme to add a background image to the announcement bars. In the Base.css file, I have added:

.announcement-bar {
background-image: url(https://cdn.shopify.com/s/files/1/0881/9094/3569/files/Xmas_Winter_Bar.png?v=1733760068);
background-size: 100%;
background-repeat: no-repeat;
}

However the underlying .gradient is still applying the background colour to what seems to be padding on the left and right meaning the image cannot span full width.

How might I address this 

[Made4uo-Ribe]

Hi @RJE_ECOM 

Please, share your store URL. Thanks!

[RJE_ECOM]

Hi @Made4uo-Ribe 

I have temporarily commented out the code block in the base.css file but here is the site URL https://luxebooti.com/

[Made4uo-Ribe · Accepted solution]

Thanks for the info, add this code in your base.css or where you add the code with background image. 

.utility-bar__grid {
    max-width: 100%;
    padding: 0 !important;
}

And Save. 

Result:

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[RJE_ECOM]

Thank you @Made4uo-Ribe  - That worked on desktop. How is the background image now formatted wrongly on mobile? Any suggestions?

[Made4uo-Ribe]

You change it with rich text section? 

[RJE_ECOM]

Hi @Made4uo-Ribe - I managed to implement a solution for mobile but I have since changed my mind on using the announcement bar. I am using the rich text block in order to stack text within one section. This option works better for the website theme.

I thank you for your help and expertise on my original question.

[Made4uo-Ribe]

Yes, I see it. I tried to inspect the cause of the image being cropped but it change suddenly. Using rich text is also a good idea since you only want the text and not the animation of the announcement banner.