Fully Responsive Header Image on Mobile

I have read several posts withing Sydney PRO on this topic but none of your team have actually provided a solution for this.

It is very common for websites to have a hero image or cruelly slider image which is fully responsive on BOTH the desktop site and mobile site.

I am looking to achieve this with my website Organic-toothbrush.com

As the developers know, many other customers have complained of the image becoming “too small” and you will most likely suggest changing the mobile header settings from “responsive” to “cover” etc and it doesn’t solve the problem.

Here is an example of a website which has a fully responsive header image on both desktop and mobile:

https://www.tumblr.com/

Notice how the images and all content respond to screen size perfectly. This is what people have been asking and I am hoping you have a solution.

Thanks,
Shahan

Hello Shahan,

Try to use slide images of the same aspect ratio, this image seems to be too narrow:

Kind Regards, Roman.

Hello Roman,

I followed your advice and used the same pic sizes for both images. I am happy to use just one image if you can show me a way to make this one image or both images fully responsive within mobile and tablet versions of the site. By fully responsive I mean the picture fills the full screen size both horizontally and vertically like the Tumblr website and as soon as you scroll the image ends and you can see the content below.

I also went under

customise > header area > header slider

I have tried both Full Screen and Responsive options and neither allow my screen to auto-adjust the header image to fill the screen as it successfully does when viewed in desktop mode. Please help.

Shahan

Hello Shahan,

I don’t think that there is an easy way to do it, unfortunately.

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.