Debut theme: image with text overlay doesn't show the image

Solved
Highlighted
New Member
4 0 0

Hi!

I'm having a problem with the debut theme. When I insert an "image with text overlay" section the image does not show up. It works fine with the placeholder image but as soon as I choose an image of my own the section just goes solid gray. Same for the slideshow however when I untick "Show overlay" the images show up or if I press the mobile preview button (this only works for the slideshow). If I look in "page info" in my browser they show up in the list so they are there for sure, it's just something (the overlay?) blocking them. The text always shows up if that's any help.

 

I've tried firefox 71.0 and microsoft edge and they share the same problem.

Any help or tips regarding this would be great!

0 Likes
Highlighted

Hello @Ludwig_van,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
New Member
4 0 0

Hi @oscprofessional thanks for taking the time!

Unfortunately the store is not live yet and I have therefore no link to share. I have however attached a screenshot that hopefully will further illustrate the problem. On the left is the page info panel with the image that is supposed to display and on the right the page with an image and a slideshow, both with what looks like a solid overlay.

 

Untitled.png

0 Likes
Highlighted

Success.

Hello @Ludwig_van,

Actually you increase the opacity.Thats why its happened.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

.hero__overlay::before,.slideshow__overlay::before {
	opacity: 0.4 !important;
}

 

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
New Member
4 0 0

Hey, that worked!

Strange because I don't remember making that change.

If anyone else have this problem - I also had to add .image-bar__overlay for it to work on the image with the text "test" in the screenshot.

 

Thanks a bunch!

0 Likes
Highlighted
New Member
4 0 0

Omg, I'm such a dumbo!

In theme settings -> colors -> image overlays you can just change the opacity with a slider. Mine was on 100%

0 Likes
Highlighted

@Ludwig_van,

Ok.Then remove css which I gave

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes