Added a background image to header but it's not showing on mobile view

Store Design
, , ,
1

I added a background image to the header section with code and changed the height, and it’s working great on desktop but on mobile view the image doesn’t show at all. Is there a way to get it to work on mobile as well? See below screenshots of desktop and then how it’s appearing on mobile:

Cozytown_0-1712270038250.png
Cozytown_0-1712270038250.png2198×1348 556 KB

Cozytown_1-1712270182217.png
Cozytown_1-1712270182217.png1560×1492 152 KB

I’m using the Dawn theme

My store link is www.cozytown.store

2

Hi @Cozytown

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

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

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

header.header.header–middle-center.header–mobile-center.page-width.header–has-menu.header–has-localizations {

background: url(/cdn/shop/files/wide_banner.png?v=1712235270) no-repeat;

background-position: center;

object-fit: cover;

background-size: cover;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Hey Henry!

I appreciate that but unfortunately that didn’t fix it