Picture in Header

Hi you can add this to your quick CSS the Background image will be completely visible but really small.
For this Breakpoint you can also replace the image with a different one just upload the new one and replace the image url with the new one for mobile. Hope this helps.

@media only screen and (max-width: 767px){
.header_color .header_bg {
    background: #ffedba url(https://www.istrien-villa.com/wp-content/uploads/2020/03/header.jpg) top center no-repeat scroll;
    background-size: contain;
}
}

Regards
Alex

Hi ok i think i know what you want to achive.
remove the old one and replace it with this one:

@media only screen and (max-width: 767px){
	
#header_main{
border:none;
}
.responsive #top .header_bg{
	min-height: 200px;
	background-size: contain;
	background-color: transparent;
}
.responsive #top #main{
	margin-top: 75px;
}
.responsive #top .av-logo-container .avia-menu{
	background: rgba(255, 232, 173, 0.7294117647058823);
	padding: 10px;
}
.responsive #top #header_main > .container .main_menu .av-main-nav > li > a{
	padding: 0px !important;
}

}

@media only screen and (max-width: 500px){
.responsive #top #main{
	margin-top: 25px;
}
}

I gave the burger menu a colored background(transparent) otherwise the visibility is not good.
Hope it works as i only can test it locally in the console…..

Regards
Alex