CODEWITHSUNDEEP
htmlcssimage
DillyDally
DillyDally

Reputation: 3

Unable to get Hero/Background Image to full height

Summary: I am trying to get this image to show fully as a Hero image. Edit for clarification: I want an uncropped version of the image to take up approximately 1/4 of the full screen. I want the text to lie on top of the image off to the left side middle of the image.

AlbrechtDurerKirkeFrau, What is working. I have gotten the image to cover the entire width of the screen. I have gotten the image to sit flush with the top of the page (no padding or margin) I have gotten the text to sit where I want it relative to the image.

What isn’t working. I can’t get the entire height of the image to display. (It is cropped)

What I have tried: I have tried using pixels vs %. I have tried using fixed position vs relative. I have tried scaling the image (before loading it)

HTML CODE:

body,
html {
  height: 100%;
  margin: 0;
}

.hero-image {
  background-image: url("https://www.posweyb.net/DurerChurchWoman.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -50%);
  color: #733b0b;
}
<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">Posweyb</h1>
    <p>Blätter des Posweb</p>
  </div>
</div>

enter code here

Upvotes: 0

Views: 45

Answers (1)

Olivia S
Olivia S

Reputation: 62

Set the 'body' height to 100vh so it always takes up the full height of the browser window. Then, set the '.hero-image' height to 100vh to ensure it also fills the entire screen.

See the CSS code snippet below:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

  body,
  html {
   width: 100%;
   height: 100vh;
  }

.hero-image {
  background-image: url("https://www.posweyb.net/DurerChurchWoman.jpg");
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(-50%, -10%);
  color: #733b0b;
}

Upvotes: 1

Related Questions