The reason the image is 'zoomed in' is because the background-size is set to cover. As the screen gets wider, the image must be stretched both horizontally and vertically to maintain the correct aspect ratio. The only real fix here would be to use a more narrow image, although it will then be 'zoomed in' at some aspect ratios on smaller screens.
Header Image Sizing
-
30-06-2023 - |
Question
URL to my website is http://chris-schilling-jksc.squarespace.com/ Password to get into site is fsj
I am using a Squarespace template which is causing me problems in making my main header image larger. Currently it is fairly zoomed in cutting off a lot of the picture. I am looking for some css to fix this problem. Squarespace templates are responsive making it hard to customize certain aspects. If someone knew a fix to my problem it would be greatly appreciated.
Solution
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow