Decide how Hero image appears on mobile

Question

I generally can google my way to an answer but I can't for the life of me figure out what this is actually called. I apologize in advance.

I have a hero image that looks great on a full-size screen. When on mobile the view on that main image shrinks (to fit the screen) which is ok but how do I determine which part of the photo to focus in on? By default it appears to zoom in and only focus on the center of the image but what if the focal point should be off to the left or right? is there a way for me to determine which part of the image to look at?

Or is this not a best practice? In that case I'd want to shrink the image so the whole thing appears on the page instead of a zoomed-in-portion.

Thanks in advance!

Answer 1

This is not the best practice, it seems you should have an image for desktop and another one for mobile in order to fit well the screen.

However, you can set where to focus using the background-position CSS Property.

.imgBackground { 
    background-image: url('image');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center bottom; 
}

Check this life example.