How to change image with text top background color

Store Design
,
1

Hello there,

I am trying to figure out how to change the top color of my image with text section. It currently looks like this:

WK100_0-1692764982664.png
WK100_0-1692764982664.png1237×856 254 KB

What I am trying to change is that white top box above the picture to be the same orange color as the rest of the page. I believe that box’s color is tied to the gradient option in the theme settings. I have the gradient setting off for this section so it is defaulting to the background color which is selected white. I have the background color selected white because I want the box that overlaps the picture to be white. So what I am trying to do is keep the box that overlaps the picture white but make that top portion the orange color so it looks like this (pardon my photoshop skills):

WK100_1-1692765119349.png
WK100_1-1692765119349.png1240×856 263 KB

Please help!!

2

Hi @WK100 ,

This is David at SalesHunterThemes.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL
if your website is password protected then also provide the password.
David | SalesHunterThemes team.

3

Hi @WK100

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

You can replace the color by change the yellow value

Hope this can help you solve the issue

Best regards,

Noah | PageFly

1 Like
4

I copied this code into the bottom of base.css and it still looks the same:

#MainContent { background-color: #ffe285; }
5

Link: https://m8y2jrawu3xlyh31-81877893427.shopifypreview.com

6

Hi @WK100 if you want to put its at bottom of base.css you shouldn’t put it with tag

#MainContent {
background-color: #ffe285;
}
.section-header {
margin:0 !important;
}

Above the correct code to put in base. css

or


to put in theme.liquid

Heres's how its works:

![PageFlyNoah_0-1692765970987.png|1373x931](upload://uYep4JadLHKZUz83P3a2leU19AA.jpeg)
7

Hi @WK100

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → theme.liquid file.

Add the following code in the bottom of the file above tag

David_SHT_0-1692765931776.png
David_SHT_0-1692765931776.png2152×1500 589 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Hopefully, this proves useful.
David | SalesHunterThemes team

8

Hello,

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.