I'm trying to make the header for the website for my personal project. However, the image is overflowing out of its' container and I don't know how I can fix it.
I've tried using overflow: hidden , object: cover; , and changing the settings on my clip-path , but the image was either completely unresponsive to these changes or vanished off - screen. I would appreciate any help in this matter - I need the image to be at these dimensions but while not overflowing beyond my header.
html, body { text-align: center; color: black; font-family: "EB Garamond", serif; background-color: #fdf6e5; width: 100%; } .image-holder { font-weight: bold; font-size: 72px; background-color: #573809; color: #fdf6e5; text-shadow: black; border: 10px solid #BB7025; width: 100%; height: 200px; overflow: hidden; display: flex; justify-content: center; align-items: center; } .image-holder .header-map { position: absolute; clip-path: inset(3900px 2250px 500px 200px); top: -400%; left: -40%; transform: rotate(-9.6deg); opacity: 0.25; object-fit: cover; }<div class="image-holder">The Baluchestan Project <img src="https://upload.wikimedia.org/wikipedia/commons/7/75/Bokhara%2C_Afghanistan%2C_Beloochistan%2C_etc._LOC_2004629039.jpg" class="header-map"/> </div>
inset(3900px 2250px 500px 200px). Where do you want the image to be and what size should it be precisely? Right below the header? Screen size? Or those hard coded size?