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.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> My Final Project </title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet"> <style> 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; } </style> </head> <body> <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> </body> </html>
