0

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>

Improve this question
3
  • why not use background-image? Commented May 9 at 20:20
  • Also I'm seeing the 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? Commented May 9 at 20:24
  • I attempted to use background-image beforehand, but then I was unable to crop the image, as the settings I had set for the inset did not work. As far as the image size, I envisioned the image to cover the header and brown box, but without covering the border. I planned to have the size of the image be dependent on the size of the user's screen, but I am not skilled enough in CSS to implement that yet. I visualised the top-left coordinate of the image being around (210, 3890) and the bottom-right coordinate being around (2000, 4500), enough to cover the coast of Makran and its labels. Commented May 9 at 20:38
Related questions
4418
Change an HTML input's placeholder color with CSS
4319
Is there a CSS parent selector?
3724
Set cellpadding and cellspacing in CSS?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.