If you plan to use a Header Featured Area background image with text or other element inside, please read our recommendations below.
In general we advice you to really avoid that, because when you combine it with background-size: cover, the text may be cut off on mobile resolutions.
In case that you need using such background images, you have to make sure that all of your images are the same size. You also have to add the custom CSS code in Vamtam > General Settings > Custom CSS:
@media (max-width: 1920px) {
.header-middle {
background-position: bottom center;
min-height: calc( 100vw * 560/1920) !important;
}
}
The bold numbers must match you image height and width exactly, and this should be the same for all pages. The red number must match your image width.
How it looks on mobile resolutions before adding the code:
How it looks after adding the code:
