Hi All
Thank you in advance for any assistance.
On the following website I have an issue with the images where on larger resolutions they’re not rendered as I would like, so they cut off people’s heads and don’t adjust well to larger resolutions. https://www.developcoaching.co.uk/. Take the banner image on the top as as example
Would someone be able to point me in the right direction as to what to do to fix?
Many Thanks
It’ll cut the bottom off but you can use
background-position-y: top;
Hi,
Unfortunately this is not such an easy question to answer simply but perhaps I can offer choices and explain what’s going on.
Your banner image original size is 2880x1500px. You cannot stretch the width of the image without stretching the height to maintain the aspect ratio and to ensure the whole image is displayed. In the CSS you have used background-size:cover for the banner image which ensures the image covers the available space but in order to do this the width and height of the image are stretched until they ‘cover’ the background and then anything bigger than the background is cropped out of the picture. This results on wide screen that the heads in that banner picture will be cut off as the real image is now many times bigger than the space available.
This is not really a css issue but a logical issue in the way your banner is displayed. If you want a whole picture to show and not be cropped and to go edge to edge then you must increase the height and the width proportionately to maintain the aspect ratio. You could use background-size:contain to show the whole image in the space available but it would result in great big gaps at the side because the space available does not match the aspect ratio of the image.
e.g. You can’t have a picture of a person and make them appear to fill a letterbox sized space.
The choices available to you are to either:
a) scale the height in proportion to the width which will allow the image to be presented in full but will of course take up a lot of height of the screen. You would need to use the percentage padding trick to maintain an aspect ratio in relation to the width.
This code will allow all the image to show:
.banner--image{padding-top: 24% !important;padding-bottom: 28% !important;padding-right:5rem !important;}.
As mentioned that will make quite a large image and will look like this.
b) If the above method takes up to much height and you still want to keep the letterbox effect then you will need an art direction method and use a media query to supply an alternative image where the focus of the image fits well at that larger width. Of course it means you will need to find a suitable image (or indeed set of images) but such is the job of a web designer 
Another method is that you could stop scaling the image but provide a solid background for the edge to edge effect. It can be a solution but doesn’t always look good.
Alternatively find a better image that fits all scenarios and don’t have peoples heads at the top of the image but in the centre perhaps.
In this old example of mine the image looks great at all sizes including 320px mobile or 2500px desktop.
http://www.pmob.co.uk/temp2/template1/index.html
The focal point is the girls but the rest of the image is just seascape and the fact that it gets cropped does not affect the main focal point of the image.
As I said its not a simple question to answer as it requires a whole design methodology and supply of suitable images to use
Yes that could be a quick solution if you don’t mind cutting off the bottom; which in this case may indeed be suitable
Hi Both
Thanks so much for the responses, will be working on this tomorrow and will let you know the results
Thanks again
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
