Hi everybody,
I’m a new webflow user. I’m trying really hard to optimise my background Hero image and slider image. Depending on the screen size, it’s either stretched horizontally or vertically. Where am I going wrong and how can I correct it?
Please help!
Thank you.
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi Rohan,
Try using the cover function in the background menu panel of the section. Then you can use the sliders to adjust position.
Hello @ChieraCreative ,
Although it looks perfect on my computer, as always (screenshot 1).
It doesn’t look right on my colleague’s computer (screenshot 2).
This is the problem I’m facing - Image optimisation for different screen sizes.
@RohanGanachari For this I would recommend playing with the aspect ratio - Try fixing the image to the bottom of the section and increasing to 80vh
No cutoff on my end with a 24" screen
One trick you can try is zooming out on your browser to replicate a larger screen
I did exactly as you showed me.
Here’s a zoomed out screenshot. Perfect on my computer.
Here’s the same image on my friend’s computer.
I don’t want it at 80VH because I need the part of the next section showing up.
@RohanGanachari I do see that it’s no longer stretching on you. Unfortunately, that’s going to be more related to the aspect ratio of the screen and the actual image being used.
@ChieraCreative The original image dimensions are 1190 x 700 px. I re-sized the image by increasing height to 2380 x 1400 px and 3570 x 2100 px. But I’m experiencing the same issue.
Any ideas on what else I can do?
@RohanGanachari On a wider screen, the field of view will be narrower therefore cropping more of the image. The only options would be to increase the height of the div, use a container with margins which would cause the image to not span the screen or use a picture that is zoomed out a bit more.
