Can I insert an image behind heading text on a webpage header?

Store Design
1

Hi, I want to be able to add an image (it will already be set to be a bit see through) behind the heading text and button on the header. I know you can add boxes with a color, but is it possible to be able to insert an image instead of just having a color behind the heading text? Thanks

2

Hello @shellbell ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

This is the store, the image is one right now but in reality I want it to be two separate ones, so the purple stays behind the text even when resized.

https://cacaowisdom.com/

4

Hello @shellbell ,

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1669710180358.png
GemPages_0-1669710180358.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1669710441835.png
GemPages_1-1669710441835.png1917×910 81.5 KB

*You can get the image’s URL by uploading the image to the Shopify file:

GemPages_2-1669710590962.png
GemPages_2-1669710590962.png1918×934 109 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

5

That didn’t do anything.

6

Hello @shellbell ,

I can’t see the code that you added. Could you screenshot a picture?

Best regards,
GemPages Support Team

7

I took it out because it didn’t change anything. But basically I have two photos. I want the purple one behind the white text, but also to stay so that when the size changes, the text stays inside the purple still. Is this possible?

Untitled design (23).png
Untitled design (23).png1640×926 353 KB

Untitled design (24).png
Untitled design (24).png1640×926 15.4 KB

8

Hello @shellbell ,

It is impossible with the code’s structure of the theme that you have used because the image will be resized with each screen’s size.

It will be easier if you can upload a separate image for the mobile, then you can upload an image that is more suitable for the design on mobile.

However, this theme seems don’t allow you can do that.

So in this case, I suggest you should reach out to the theme’s support and ask for a request to allow you can upload a separate image for other screen sizes.

Best regards,
GemPages Support Team