My issue lies in the responsiveness of an image that I have used as a header background-image for the body. Despite my attempts to make it responsive, the image seems to clip somewhere when changing the window size. Consequently, the actual focus of the image is lost and disappears entirely...
Below is the code snippet:
.topnav {
background-image: url(/images/pastry-topnav-bgd-img.jpg);
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 400px;
}<body>
<header>
<div class="topnav"></div>
</header>
</body>I am seeking guidance on how to address this issue and ensure that the image remains responsive while maintaining its focus without displacing too much.