Background image responsive

Design help General
1

Hi,

I see a lot of examples where background images respond to the device size - but no matter what I try this does not work for me.

I’ve searched though the forum, looked at examples, tried demos, cloned sites but still it does not work.
Attached is the background image - what I would like to happen is that the image as a background “shrinks” so that all is shown on the device. The only option that seems to be available is to upload different images for each device which is a very old approach and something I did not think was necessary anymore.

Can anyone help or point me in the right direction?

Thanks
Pete
[Uploading: background2.png…]

2

Please add screenshot example of the result you want (VS your “unwanted” render) + Link.
No way to understand your Q.

3

background
background1391×674 299 KB

This is the image - if I put this into mobile, then the band at the back are taken out and the “singer” in the middle is huge on the screen.

4

And what do you want to happen?

1 Like
5

Hi Dram,
As I said:

So I would like it so that the picture is showing the same on all devices.

https://preview.webflow.com/preview/page-tabs?utm_medium=preview_link&utm_source=designer&utm_content=page-tabs&preview=fa0ee77c775fd7e47e64f9e8fc7fffcd&mode=preview

I’ve been struggling with this for a while now, not sure if it’s just the way it is or if there is anything that can be done.

Thanks
Pete

6

Well, you can use “contain” instead of “cover” in your background settings but this will obviously make that image not to span full screen.

7

Yes, I have already tried that but as you say it doesn’t do what I require.
Oh well, looks like I am stuck with what I have.

8

And what would that be? If you want the background image to fill the whole page but at the same time not be cut off from the sides on narrower viewports… well, that’s just physically impossible unless you squish that image, which I am pretty sure is not something you want as well