Untitled

<link rel="preload" as="image" href="/Data/EditorFiles/topbanner-mobil.jpg">
<link rel="preload" as="image" href="/Data/EditorFiles/topbanner.jpg">
<script>
  document.addEventListener("DOMContentLoaded", () => {
    if(window.innerWidth < 768) {
      document.querySelector("#header-wrap #headerMain").insertAdjacentHTML("afterbegin",
      '<div class="top-banner">'
        + '<img src="/Data/EditorFiles/topbanner-mobil.jpg">'
      + '</div>'
      );
    }else{
      document.querySelector("#header #header-wrap").insertAdjacentHTML("afterbegin",
      '<div class="top-banner">'
        + '<img src="/Data/EditorFiles/topbanner.jpg">'
      + '</div>'
      );
    }
    /* #headerMain veya #header elementi fixed ise TopBannerin yuksekligine gore bodynin paddingin degerini degistir */
    var bodyHeaderMain = document.querySelector("body #headerMain");
    var bodyHeaderMainStyle = getComputedStyle(bodyHeaderMain); // bodyHeaderMain.getBoundingClientRect()
    if(bodyHeaderMainStyle.position == "fixed") {
      var topBanner = document.querySelector('.top-banner');
      var topBannerStyle = topBanner.getBoundingClientRect();
      var bodyHeader = document.querySelector("body #header");
      var bodyHeaderStyle = bodyHeader.getBoundingClientRect();
      // + parseFloat(bodyHeaderStyle.height) -  body:not(.iosMobile) #header
      document.querySelector("body #header").style.marginTop = parseFloat(topBannerStyle.height) + "px"; // .paddingTop , .height
    }
  });
</script>
<style>
.top-banner {
  overflow-x: hidden;
}
.top-banner img {
  display: block;
  width: 100%;
}
@media (max-width: 767.99px) {
  /* Headerda padding var ise resmi yandaki bosluklara dogru genislet: */
  .top-banner {
    width: 100vw;
    margin-left: -10px;
    margin-right: -10px;
  }
}
</style>