-
I’ve run into an issue where my featured-image hero sections on single posts are always badly cropped or vertically “squashed” by background-size: cover. I’ve tried pretty much every setting and custom CSS I can find:
https://colombiaroadtrip.co.il/is-colombia-dangerous/
Element Settings
In my Post Page Hero Element, I’ve enabled Use inline style → On and set the Selector → Container, so the background is applied directly to the container rather than a ::before pseudo-element.
Image Size
I’ve switched the hero’s Image Size from full to large, and even to medium_large, to reduce file weight and ensure correct dimensions—but the hero still crops/zooms unpredictably.
Additional CSS
I’ve added snippets like these to Appearance → Customize → Additional CSS:css
Copy
Edit
.page-hero {
background-size: auto 100% !important;
background-position: center 20% !important;
min-height: 350px;
padding: 150px 20px !important;
}
.page-hero::before {
background-size: contain !important;
background-position: center center !important;
}None of these have any visible effect on the front end. The background always remains cropped and “compressed.”
Thanks
-
Updated private information, thanks
-
Hi there,
Do all your images have the same aspect ratio?
If so, you can calculate a
min-heightfor the container, so it can keep the same aspect ratio as the image.For example, if your image’s aspect ratio is 3/2 (width/height), then you can do a simple math:
100vw/3*2=66.6vw, so you can set the container’s min-height to 66.6vw.
If your images are not having the same aspect ratio, then you’d better use an image block instead of a background image.
-
Hi,
No, all the images don’t have the same aspect ration at all
If I’ll use the image block, I wouldn’t be able to set it as a background image? -
Hi there,
You can use the Image block as a background image. Here’s an example of the block markup:
<!-- wp:generateblocks/element {"uniqueId":"d2ea61f8","tagName":"div","styles":{"position":"relative","height":"500px","overflowX":"hidden","overflowY":"hidden","width":"100%","display":"flex","alignItems":"center","justifyContent":"center"},"css":".gb-element-d2ea61f8{align-items:center;display:flex;height:500px;justify-content:center;overflow-x:hidden;overflow-y:hidden;position:relative;width:100%}"} --> <div class="gb-element-d2ea61f8"><!-- wp:generateblocks/media {"uniqueId":"698e022c","tagName":"img","styles":{"height":"auto","maxWidth":"100%","objectFit":"cover","width":"100%","position":"absolute","top":"-300px"},"css":".gb-media-698e022c{height:auto;max-width:100%;object-fit:cover;position:absolute;top:-300px;width:100%}","htmlAttributes":{"src":"https://colombiaroadtrip.co.il/wp-content/uploads/2025/04/%D7%A4%D7%97%D7%93-%D7%91%D7%A8%D7%97%D7%95%D7%91%D7%95%D7%AA-%D7%A7%D7%95%D7%9C%D7%95%D7%9E%D7%91%D7%99%D7%94-768x768.png"}} --> <img class="gb-media-698e022c" src="https://colombiaroadtrip.co.il/wp-content/uploads/2025/04/%D7%A4%D7%97%D7%93-%D7%91%D7%A8%D7%97%D7%95%D7%91%D7%95%D7%AA-%D7%A7%D7%95%D7%9C%D7%95%D7%9E%D7%91%D7%99%D7%94-768x768.png"/> <!-- /wp:generateblocks/media --> <!-- wp:generateblocks/text {"uniqueId":"0259940c","tagName":"h2","styles":{"color":"var(\u002d\u002dbase-3)","fontSize":"60px","zIndex":"1","position":"relative"},"css":".gb-text-0259940c{color:var(\u002d\u002dbase-3);font-size:60px;position:relative;z-index:1}"} --> <h2 class="gb-text gb-text-0259940c">This is a headline</h2> <!-- /wp:generateblocks/text --></div> <!-- /wp:generateblocks/element -->You can adjust the image’s position using the Inset values (top, right, bottom, left) as needed.
- You must be logged in to reply to this topic.