Hello everyone and thanks for the help in advance. I am working on the UI for a website (not my forte) and want to incorporate a hero image. However, I am struggling with positioning and scaling of the image. I have an example posted at http://christyforcongress.com/home/sitepointexample6. A couple of issues. On a full width screen, the top and bottom of the image cuts off, regardless of the size of the image. On mobile, I have two problems, first the image is more truncated as well as the logo masking the hero. I think I know how to resize the logo, but am not sure what to do on the hero. Is this a case of using to images or some other solution. Thanks again for the help.
By cut-off do you mean the fact that the image has been zoomed to cover the viewport and in order to do so the height/width of the image must be increased until the smaller dimension fills the viewport?
When you use background-size:cover you are telling the browser to make sure that the image covers the whole area that you have placed it on while still maintaining the correct aspect ratio. It does this by increasing either the width and height of the image proportionately until the image covers the whole viewport. Therefore unless your viewport happens to have the exact same aspect ratio as the image that you have used (highly unlikely and impossible responsively) then one of the dimension of the image will be oversized in order to make both dimensions cover the required area.
This has nothing to do with CSS as such but limited by the laws of physics. You can’t change the shape of a real image by stretching just one dimension otherwise you break its aspect ratio (imaging a picture of a person - you can’t just stretch the width or the person will appear very wide and stretched horizontally).
If you want you image to remain within the viewport but at its natural aspect ratio then you would use background-size:contain. This would ensure that the whole image was always fully view-able but would result in gaps at either the sides of the top/bottom. To make it simpler to understand if you have an image that is 300 x 300 then you can’t make it fit into something that is 300 x 150 without shrinking or cropping in some way.
One of the key points in design is using images that are suitable for the task in hand and having a hero image where you have words on a hat that must remain readable is not really a viable choice for that type of display. Perhaps if the focal point was the centre of the image then you might get away with it but you need to choose your images carefully.
As I said above the image you are using is not a good choice for a full page image especially if it is not simply decoration.
You could use a media query for smaller screens and reduce the size of the image area by 50% which will make it fit better and then reduce the logo size etc. However you may be better off re-thinking the smaller display and maybe remove the background image altogether.
I can’t really tell you what to do as these are all design considerations and you have to find the approach that works best for you and for your site and visitors. 
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.