Background Image Scaling Issues

Hi everyone,

I’ve been building a site using Elementor + the Blocksy theme, and I’ve run into an issue I can’t quite solve.

I’m using two versions of the same background image — one for desktop (horizontal), and one for mobile/tablet (vertical). I’ve already optimized each section using custom padding, viewport height (vh), and responsive settings per device. Everything looks great inside Elementor’s editor, and mobile/tablet views seem solid on actual devices.

The problem is with desktop screens — specifically how things look across different monitor sizes and aspect ratios.

On certain monitors (e.g. squarer ones vs ultrawide), the background image either blows up or crops awkwardly, which throws off the entire visual balance of my hero section. The heading text also shifts position depending on the monitor.

• When I use center center for background position, the text stays in a consistent place across screens — but it looks cramped against the image.
• When I use top center, the spacing looks better visually — but then the heading position becomes inconsistent between screens.
• I’m already using cover as the background size, which helps with fill but exaggerates the zoom issue.

Even with these adjustments, I still get that awkward scaling effect depending on the monitor shape.

Questions:

• Is there a best practice for creating a consistent hero section background across all screen widths and monitor types?
• Should I be using a different background sizing method — like contain, or maybe even switching to an <img> element instead of a background?
• Is there a more scalable layout technique I’m missing — like certain container settings or section structure — that could help with consistency?

Any help, tips, or working examples would be super appreciated.

Thanks in advance!