Responsive Header Imag

Hi, @elektrobusse1

Add the following code to Appearance -> Customize -> Additional CSS:

@media screen and ( max-width: 768px ) {
.has-header-image .custom-header-media img {
object-fit: contain;
}
}

Thanks indeed this works but, it is the same as setting position:relative.
The black bars above and down are visible.

@elektrobusse1

Please update your theme to the latest version.

After that, add this CSS code in the Customizer and remove the code you added previously:

@media screen and (min-width: 48em) {
.admin-bar.inspiro-front-page.has-header-image .custom-header-media, .admin-bar.inspiro-front-page.has-header-video .custom-header-media {
    height: auto !important;
}

}
.has-header-image.home.blog .custom-header, .has-header-image.inspiro-front-page .custom-header, .has-header-video.home.blog .custom-header, .has-header-video.inspiro-front-page .custom-header {
    height: auto;
}

.custom-header-media {
    position: relative;
    min-height: 0;
}

.has-header-image .custom-header-media img {
    height: auto;
    display: block;
    min-height: 0;
}

If this still doesn’t work, we recommend you remove the text from your image or place it in the middle of the image. You can find more tips here:
https://www.wpzoom.com/docs/recommendations-themes-full-width-sliders/

Thanks this helped but there are still some issues with black bars.
For me it would be sufficient if i do not have an header background image at all but i still want to have an image as the top content over the whole screen width and beginning under the nav bar. Do you have a tipp on how i can achieve this. (Remove header image – ok, create an image block on startsite page – ok (but this does not fit over whole screen width and begins not under the navbar but on top of page)