This plugin makes managing background images effortless by allowing you to set a focus point that stays consistent. Regardless of how the image is resized or the background changes, the focus point ensures that the most important part of the image remains visible and centered.
Ideal for responsive designs and dynamic backgrounds, this tool ensures your media always looks polished and professional on any screen size or resolution.
🚀 See the plugin in action on
WP Company
To display an image in your custom template with the focus point applied, you can use the following code snippet:
Most WordPress themes already use this standard WordPress method to render featured images.
For featured images (post thumbnails):
For images from Advanced Custom Fields (ACF):
To ensure the image fills its element while maintaining the focus point, use the object-fit property in your CSS. For example:
img {
height: 300px;
width: 100%;
object-fit: cover;
}
💡 The plugin automatically adds an inline style attribute to the image element, such as:
style="object-position: 50% 38%;"