Using background-size:cover to Highlight an Image Feature
Most implementations of background cover I have seen and used myself in projects tend to use the cover style with background position center center (or 50% 50%), scaling from the center. This works great most of the time, since usually the background image kind of works.
However, there are times that the old center center results in important information being cropped out of view. For example, maybe you don’t want someone who is in the corner of an image to be cropped out. This can easily be addressed by messing with the center position of the background image.
Here is a tool that can be used to test out setting different focal points in an image! I would recommend opening the result in Codepen, in a new window.
Try clicking on the sun in the little thumbnail, then resizing your browser into different shapes. The cropping will obviously change, but the sun will always be in view. Now click on the front of the train, and repeat the exercise.
Hopefully this will be useful for someone else! I am going to be using it a lot on a site I am working on (which is why I made the tool).
Comments