Make background image appear less cropped in wide browser window

Thanks again Paul for your suggestions - I appreciate your time.

1 Like

I put up a quick demo of what I suggested above as proof of concept.

Note that this was just a 10 minute coding job and the image was just hacked up to show the effect so obviously you would need to do this properly (and with precision). I used the very wide image but of course you would use your media queries to give this image to double density displays and then use a smaller resolution image for normal desktop sizes and perhaps a smaller image for mobiles with less space at the sides.

The image of the person is separated from the main image so you can use independent media queries to adjust position and size as required. I just centred it for smaller screens but you can tweak as much as is needed.

Hope it gives you some ideas anyway.


That’s great - I’ll view the code and see if I can re-work it based on your suggestions. Thank you again.

It works for me

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.