Debut theme different image with text overlay mobile and desktop (images on mobile look blurry)

Solved
Alainkaz
Tourist
3 0 2

@KetanKumarGreat to hear! Can you let me know what I can add to my code to make this possible?

KetanKumar
Shopify Partner
19046 1992 7022

@Alainkaz 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
xdreamineer
Excursionist
16 0 6

@KetanKumar 

Hi I have a similar need. I use Image with overlay text as banner. In mobile, the large image size slow down the speed alot.

How to switch between pc and moible, two different image with overlay text with same image but different pixel size?

Url of my store:www.planetdeluxe.ca

 

Thanks

Rachel 

KetanKumar
Shopify Partner
19046 1992 7022

@xdreamineer 

can you please try this 

https://www.mojoin.com/show-shopify-banner-image/

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
xdreamineer
Excursionist
16 0 6

@KetanKumar 

That article deals with banner images only; tried it already. What I need is image with text overlay. I did not see anywhere that explains how, plus I need a full width banner, the article mentioned something like setting the container to some value. I check the assets file, no clue what exactly the writer means. I am not technical, I might miss something

Thanks

Rachel

KetanKumar
Shopify Partner
19046 1992 7022

@xdreamineer 

sorry for this please share image with text overlay section code so i will try to update mobile code as you like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
xdreamineer
Excursionist
16 0 6

@KetanKumar 

Hi, Do you mean these? Sorry I do not know much about coding. I know I can see the coding by clicking inspection over the webpage.

Thanks

Rachel

mobile image overlaytext.png

desk top image overlay text.png

  

KetanKumar
Shopify Partner
19046 1992 7022

@xdreamineer 

no no sorry

i mean go to  Actoin >>>> edit code >>> Section >>>> hero section > 

this section code 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
RachnRach
New Member
2 0 1

Hi, 

This worked a treat for me too..

There's only one problem, it eliminated the parallax effect. 

Do you know of any code I can add that will keep the image the new smaller correct size, but still allow the text and button to parallax, the same as the rest of my page? 

I tried changing "scroll" to "fixed" but it made the image too large and blurry again. 

www.rachnrach.com - in case you need it.

Appreciate any help.

KetanKumar
Shopify Partner
19046 1992 7022

@RachnRach 

sorry for this issue 

mobile screen parallax effect disable its good thinks because many device doesn't work also other i can't see blurry issue 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes